如何安排多个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>