Question

这是我想做的事情;

假设我有10个或更多矩形div。我想把它们中的5个并排放在一起，其他5个放在其他的下面。我的问题是;

我该如何命名div？如果每个div的类名更改或ID更改或我应该给出;

float:left

属性为所有div，让它们并排排列。所以当水平没有地方时，其他五个将被置于它们之下。

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

Answer 1

您可能会发现Wookmark JQuery插件很有用。它像Masonry，但我认为它更容易。将所有图像放在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>

然后在那之后你就可以使用更多的属性来让它看起来更像边缘等等。

希望这可以帮助你=）

如何并排排列多个div，另一个排在另一个之下

3 个答案: