cách hiệu quả để sắp xếp các div cạnh nhau?

Question

Whats cách tốt nhất để căn chỉnh 3, 4 hoặc thậm chí 5 div bên cạnh nhau? với một khoảng trống giữa mỗi người tách chúng ra xa nhau.

Tôi đã cố gắng googling này nhưng có vẻ như có rất nhiều câu trả lời khác nhau mà có vẻ quá sử dụng phụ thuộc (tức là nếu nó cho 2 divs hoặc 3 divs vv) im hỏi whats cách tốt nhất để làm điều này cho bất kỳ số lượng divs?

Cảm ơn

Answer 1

Tất cả các câu trả lời đưa ra ở đây là tuyệt vời và họ là những cách hiệu quả. Nhưng tôi đã cố gắng làm cho họ dễ dàng hơn cho bạn.

HTML:

<div id="apnd"> 
    <div>One</div> 
    <div>Two</div> 
    <div>Three</div> 
    <div>Four</div> 
    <div>Five</div> 
    <div>Six</div> 
    <div>Seven</div> 
    <div>Nine</div> 
    <div>Ten</div> 
    <div>Eleven</div> 
</div> 

CSS:

#apnd div { 
     height: 100px; 
     width: 100px; 
     border: 1px solid red; 
     margin-left: 5px; 
     float: left; /*Here you can also use display: inline-block instead of float:left*/ 
     background: orange; 
} 

Answer 2

Hãy thử điều này:

div { 
float:left 
margin-left:20px; //or whatever you want 
} 

div:first-child { 
margin-left:0; 
} 

Answer 3

tôi sử dụng này: http://plugins.jquery.com/project/equalizeCols

Answer 4

Có một cái gì đó như thế này:

div.container { display:table; border-spacing:{your-space}px; } 
div.container > div { display:table-cell; } 

trong "rất nhiều câu trả lời khác nhau" của bạn bộ?

Ngày nay, đây là cách đáng tin cậy nhất để tạo hàng ngang của các phần tử khối.

Cho đến CSS WG sẽ chấp nhận http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm :)

Answer 5

Một tùy chọn khác: http://jsfiddle.net/brandondurham/Tht3N/

<div id="row"> 
    <div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div> 
</div> 

#row { 
    white-space: nowrap; 
} 
#row > div { 
    background: lightblue; 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
} 
#row > div + div { 
    margin-left: 10px 
}