Cómo colocar DIVs uno al lado del otro

I have several DIVs that I want to place beside each other, but because they are blocking, they fall beneath each other. How can I fix this?

preguntado el 09 de marzo de 12 a las 13:03

As stated in a number of the answers, it'd be a good idea to include your code. With your question as it stands now, there are a number of valid answers but it's impossible for anyone to identify the el albergue mejor calificado answer for your situation without more detail in your question. And welcome to SO :) -

6 Respuestas

div.i-like-snuggling {
    /* don't ever leave me */
    display: inline-block;

respondido 09 mar '12, 14:03

The best way is to use float:left, but in some cases you might use SPAN instead of DIV

respondido 09 mar '12, 13:03

Nooooo floats are evil. As in, they cause a lot more problems than they solve. - Domenic

They collapse the element out of the layout. They're perfect for their original, intended usage: floating things next to long runs of text (think pictures in a book). But they were never meant as a layout mechanism, and so abusing them leads to all sorts of icky stuff like the infamous "clearfix". - Domenic

Ah, so they're not evil per se! Just like tables and blockquotes and horizontal rules, they have their place. As long as you don't abuse them. - Señor lister

Right. But putting divs next to each other is abuse. - Domenic

Or maybe absolute positioning is the best choice for you. We don't know what your HTML looks like!

respondido 09 mar '12, 13:03

I like this guy! (and absolute positioning...) - SamStar

Puede lograr esto con el siguiente código:



for your edification:http://www.w3schools.com/html/html_styles.asp

respondido 09 mar '12, 14:03

i never heard of an attribute stytle. Es esto HTML6? - Christoph

@Liam Dear Liam, you are a bit out-of-date: html6 - Christoph

@Christoph I'll believe it when a browser actually supports it?! :) Whats the penertration of HTML5? How many users still use IE5, etc. Still interesting though. First I've heard of it! - Liam

@Liam look at the date on that post :) - Domenic

add display: inline-block; style to those divs

respondido 09 mar '12, 13:03

Your best bet is to go with the css property "float"

div { float: left; width: 200px}

for example. If you don't specify a width, the browser will render a width that it feels appropriate (the width of a child element for example).

I've always found this article a good reference: http://css.maxdesign.com.au/floatutorial/introduction.htm

As suggested by other people, you can also use display:inline-block. It kinda depends on what effect you want to achieve.

respondido 09 mar '12, 13:03

And you may have problems if the divs are not the same height, or they have special margin/padding needs... - Señor lister

True, it'd be interesting to know more details about what Petter Hermansen is trying to achieve. - Bram

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.