如何安排多個div並排，一個在另一個之下

Question

這是我想要做的;

Pinterest

比方說，我有10周或更多的矩形的div。我想把他們中的5個並排放置，其他5個放在其他區域下。我的問題是;

我應該如何命名div？如果班級名稱爲每個div更改或ID更改或我應該給;

float:left 

屬性給所有div讓他們並排排列。所以當沒有水平的地方時，其他五個將被放置在它們下面。

我的意思是這10個div（或更多）的結構應該如何？

Answer 1

您可能會發現Wookmark JQuery撐着有用。它像Masonry但我認爲它更容易。把所有的圖片放在一個div裏面，在<script></script>中引用它，它基本上和Pininterest有相同的效果。

Answer 2

你可以做的是爲所有的div創建一個容器。並且在他們下面添加10個div。

<div id="divContainer"> 

    <div class="theDiv"> 
     //Div content 1 
    </div> 

    <div class="theDiv"> 
     //Div content 2 
    </div> 

    <div class="theDiv"> 
     //Div content 3 
    </div> 

    <div class="theDiv"> 
     //Div content 4 
    </div> 

    <div class="theDiv"> 
     //Div content 5 
    </div> 

    <div class="theDiv"> 
     //Div content 6 
    </div> 

    <div class="theDiv"> 
     //Div content 7 
    </div> 

    <div class="theDiv"> 
     //Div content 8 
    </div> 

    <div class="theDiv"> 
     //Div content 9 
    </div> 

    <div class="theDiv"> 
     //Div content 10 
    </div> 

</div> 

然後添加樣式。

• 首先，設置divContainer的寬度，可以說容器是1000px，每個div裏面是200px。
• 其次，您添加浮動屬性。

有點像。

<style> 
    #divContainer {background: blue; width: 1000px; float: left;} 
    .theDiv {background: pink; float: left;} 
</style> 

然後之後，你可以更多的性能，使它看起來更像邊緣等。

希望這有助於你=）

Answer 3

如果使用類，則可以將它用於多個對象而不更改名稱。
試試這個：

<style> 
.container { 
    overflow:auto; 
} 
.sidebyside { 
    float:left; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    margin:5px; 
} 
.belowdiv { 
    width:300px; 
    height:100px; 
    border-style:solid; 
    margin:5px; 
} 
</style> 

<div class="container"> 
    <div class="sidebyside">div0</div> 
    <div class="sidebyside">div1</div> 
    <div class="sidebyside">div2</div> 
    <div class="sidebyside">div3</div> 
    <div class="sidebyside">div4</div> 
</div> 
<div class="belowdiv">div5</div> 
<div class="belowdiv">div6</div> 
<div class="belowdiv">div7</div> 
<div class="belowdiv">div8</div> 
<div class="belowdiv">div9</div>