Html 将 div 元素相互对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3624653/
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
Align div elements next and under each other
提问by Tim
i want to align 4 div boxes so that they are in a 2x2 layout like this
我想对齐 4 个 div 框，使它们处于这样的 2x2 布局中
1 2
3 4
My code looks like this
我的代码看起来像这样
<div style="width:300px;height:300px;float:left;"> DIV 1 </div>
<div style="width:300px;height:300px;float:left;"> DIV 2 </div>
<div style="width:300px;height:300px;clear:left;"> DIV 3 </div>
<div style="width:300px;height:300px;float:left;"> DIV 4 </div>
which produces the following layout:
它产生以下布局：
1 2
3
4
Can someone help me with this?
有人可以帮我弄这个吗？
回答by Yi Jiang
Give all of them float: left, then wrap them in a container just wide enough to fit 2 of them, so that the other two gets pushed down. For example,
把它们全部拿出来float: left，然后把它们包在一个刚好能装下其中 2 个的容器中，这样另外两个就被压下去了。例如，
<div id="container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
CSS:
CSS：
#container {
width: 600px;
}
#container div {
float: left;
height: 300px;
width: 300px;
}
Edit:If you want more divs inside the ones you already got, then you can always apply the same technique to the children, like
编辑：如果你想div在你已经得到的里面有更多的s，那么你总是可以对孩子们应用相同的技术，比如
<div id="container">
<div>
<div>Inner Div 1</div>
<div>Inner Div 2</div>
<div>Inner Div 3</div>
<div>Inner Div 4</div>
</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
Then with CSS, use this additional style:
然后使用 CSS，使用这个额外的样式：
#container div div {
float: left;
height: 150px;
width: 150px;
}
回答by ArK
replace <div style="width:300px;height:300px;clear:left;">of Div 3with <div style="width:300px;height:300px; clear:both; float:left">
取代<div style="width:300px;height:300px;clear:left;">的股利3与<div style="width:300px;height:300px; clear:both; float:left">
full html
完整的 html
<div style="width:300px;height:300px;float:left;">
DIV 1
</div>
<div style="width:300px;height:300px;float:left;">
DIV 2
</div>
<div style="width:300px;height:300px; clear:both; float:left">
DIV 3
</div>
<div style="width:300px;height:300px;float:left;">
DIV 4
</div>
回答by codingbadger
You can achieve it using this:
您可以使用以下方法实现它：
<body style="width:600px; height:600px;">
<div id="container">
<div style="width:50%; height:50%;float:left;">
DIV 1
</div>
<div style="width:50%; height:50%;float:left;">
DIV 2
</div>
<div style="width:50%; height:50%; float:left;">
DIV 3
</div>
<div style="width:50%; height:50%;float:left;">
DIV 4
</div>
</div>
</body>
Obviously by placing the style information in to a CSS file rather than in the HTML.
显然，通过将样式信息放入 CSS 文件而不是 HTML。
I would try to avoid setting the width & height to a specific size unless you simply cannot avoid it. It causes lots of issues when viewed on different browsers at different resolutions.
我会尽量避免将宽度和高度设置为特定大小，除非您根本无法避免它。当以不同的分辨率在不同的浏览器上查看时，它会导致很多问题。
