CSS 如何并排排列多个div，一个在另一个下面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15340248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to arrange many divs side by side and one under the other
提问by Mtok
Here is what I want to do;
这是我想要做的；
Let's say I have 10 or more rectangular divs. I want to put those divs 5 of them side by side and the other 5 of them are under the others. My question is;
假设我有 10 个或更多矩形 div。我想将其中的 5 个 div 并排放置，另外 5 个在其他 div 下。我的问题是；
How should I name the divs ? Should the class name change for every div or the IDs change or Should I give;
我应该如何命名 div ？如果每个 div 的类名更改或 ID 更改或我应该给；
float:left
attribute to all divs to let them align side by side. So the other five will be placed under them when there is no place horizontally.
赋予所有 div 以让它们并排对齐。所以当没有水平位置时，其他五个将放置在它们下方。
I mean how should the structure of these 10 divs (or more) be ?
我的意思是这 10 个 div（或更多）的结构应该如何？
回答by Adam Brown
You may find the Wookmark JQuerypluggin useful. Its like Masonrybut I think its easier. Put all your images inside a div, reference it in the <script></script>and it will basically give the same effect as Pininterest.
您可能会发现Wookmark JQuery 插件很有用。它就像砌体，但我认为它更容易。将所有图像放在一个 div 中，在 中引用它<script></script>，它基本上会产生与 Pininterest 相同的效果。
回答by Vahid
If you use class you can use it for several objects without changing the name.
Try this:
如果您使用 class，您可以将它用于多个对象而无需更改名称。
尝试这个：
<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>
回答by wizoriousPRIME
What you can do is to create a container for all of the divs. And the add the 10 divs under them.
您可以做的是为所有 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>
And after that you add the styling.
之后，您添加样式。
- First, set a width to the divContainer, lets say the container is 1000px and each div inside is 200px.
- Second, you add the float property.
- 首先，为 divContainer 设置一个宽度，假设容器是 1000px，里面的每个 div 是 200px。
- 其次，添加 float 属性。
Something like.
就像是。
<style>
#divContainer {background: blue; width: 1000px; float: left;}
.theDiv {background: pink; float: left;}
</style>
And then after that you can offcourse more properties to make it look better like margins and so on.
然后在那之后，你可以偏离更多的属性，让它看起来更好，比如边距等等。
Hope this helps you =)
希望这对你有帮助 =)
