Html 如何在html和css中垂直对齐div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11246291/
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 align divs vertically in html and css?
提问by Sami
I have the following html divs :
我有以下 html div：
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
what I am trying to do is to display the first div ( contains a bar chart) and the second div(contains some text fro the chart) next to each other, then below them display the other two divs (contain other charts) one after the other vertically i.e. I want it to look like:
我想要做的是显示第一个 div（包含条形图）和第二个 div（包含图表中的一些文本），然后在它们下方显示另外两个 div（包含其他图表）一个另一个垂直，即我希望它看起来像：
and what i get currently is :
我目前得到的是：
cdfChart_div (div4) is getting displayed on top of lineChart_div(div3). What CSS style do i need to use to fix this?
cdfChart_div (div4) 显示在 lineChart_div(div3) 的顶部。我需要使用什么 CSS 样式来解决这个问题？
回答by JohnB
On the divthat comes immediately after the floatedstats_div:
在floateddiv之后立即出现的：stats_div
style="clear:left;"
style="clear:left;"
Full code:
完整代码：
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="clear:left; width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
Since stats_divis floated, its contents are taken out of the normal flow. Thus, the contents of the next divthat is part of the normal flow does not make space for the contents of stats_div. You have have to clearone side of the next divif you want its contents to come after the contents of the previous floated div. Often you'll see clear: both, which works on either edge of the normal flow div.
由于stats_div是浮动的，所以它的内容被从正常流中取出。因此，作为div正常流一部分的 next 的内容不会为 的内容腾出空间stats_div。你必须要clear在未来的一面div，如果你想它的内容来之前的浮动后的内容div。您经常会看到clear: both，它适用于正常流程的任一边缘div。
回答by DonCallisto
Take a look to my example here
看看我的例子here
HTML
HTML
<body>
<div id="barChart_div" style="width: 145px; height: 250px;">aa</div>
<div id="stats_div" style="width: 350px; height: 250px;">bb</div>
<div id="lineChart_div" style="width: 600px; height: 250px;">cc</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;">dd</div>
</body>
CSS
CSS
#barChart_div, #stats_div { float:left; }
#lineChart_div { clear:left; }
Explaination
说明
First of all remember that have an "in-line" CSS isn't a good practise. You have to prefer external CSS or internal (i.e. header) css.
首先请记住，拥有“内嵌”CSS 并不是一个好习惯。您必须更喜欢外部 CSS 或内部（即标题）CSS。
However let's see that example: jsFiddle.
As you can see, if you don't specify differently all your divs will result in an "ideal column". That's because the normal flow of the "html parser" will put them in that position.
但是让我们看看这个例子：jsFiddle。
如您所见，如果您不以不同方式指定所有 div 将导致“理想列”。那是因为“html 解析器”的正常流程会将它们放在那个位置。
If you do this with span element, instead, you obtain all the element on the same "line" (if they can stand and don't overflow, obviously). You can see that here.
相反，如果您使用 span 元素执行此操作，则会获得同一“行”上的所有元素（如果它们可以站立并且不会溢出，显然）。你可以在这里看到。
When you tell float:leftyou're "forcing" the div to be floated at the "right margin" of the previous element.
当您告诉float:left您“强制”将 div 浮动在前一个元素的“右边距”时。
Now, due to the second element floated, the third element will act at the same way.
For act as "standard" you have to use clear:leftthat will restore the "normal" behaviour
现在，由于第二个元素浮动，第三个元素将以相同的方式运行。
为了充当“标准”，您必须使用clear:left它将恢复“正常”行为
回答by Rodolfo
try
尝试
<body>
<div style="overflow:auto">
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
</div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
回答by chipcullen
If you can, change your source order so the stats_div comes first, then use float:right on justit.
如果可以的话，改变你的源为了使stats_div至上，然后使用float：正确的只是它。
回答by Pawe?
<div id="stats_div" style="width: 350px; height: 250px; float:right; background-color:#0099CC; border:1px solid black">custom</div>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">1</div>
<div id="lineChart_div" style="width: 600px; height: 250px; float:left;background-color:#0099CC; border:1px solid black">2</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">3</div>
paste it to your html, effect will be visible
将其粘贴到您的 html，效果将可见
