css - 如何将多个 div 并排排列，一个在另一个下方

Question

这是我想做的；

Pinterest

假设我有 10 个或更多矩形 div。我想将其中的 5 个 div 并排放置，而其他 5 个在其他 5 个下方。我的问题是；

我应该如何命名 div ？每个 div 的类名是否应该更改或 ID 是否更改或我应该给出；

float:left

属性给所有 div 让它们并排对齐。所以当水平没有地方时，其他五个将放在它们下面。

我的意思是这 10 个 div（或更多）的结构应该如何？

Answer 1

您可能会发现Wookmark JQuery 插件很有用。它就像砌体，但我认为它更容易。把你所有的图片放在一个 div 中，在 div 中引用它，<script></script>它基本上会产生与 Pininterest 相同的效果。

Answer 2

如果您使用类，则可以将其用于多个对象而无需更改名称。
试试这个：

<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>

Answer 3

您可以做的是为所有 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。
• 其次，添加 float 属性。

就像是。

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

然后在这之后你可以关闭更多的属性，让它看起来更好，比如边距等等。

希望这对你有帮助 =)