如何在html和CSS中垂直对齐div? [英] how to align divs vertically in html and css?
问题描述
我有以下html divs:
I have the following html divs :
...
<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>
...
我想做的是将第一个div(包含一个条形图)和第二个div(包含该图表的一些文本)彼此相邻显示，然后在它们下面显示其他两个div(包含其他图表))一个接一个的垂直方向，即我希望它看起来像这样:
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:
我当前得到的是:
cdfChart_div(div4)显示在lineChart_div(div3)的顶部.我需要使用哪种CSS样式来解决此问题?
cdfChart_div (div4) is getting displayed on top of lineChart_div(div3). What CSS style do i need to use to fix this?
推荐答案
在浮动 stats_div 之后的 div 上:
style ="clear:left;"
完整代码:
...
<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>
...
由于 stats_div 处于浮动状态，因此其内容将从正常流程中删除.因此，作为正常流程一部分的下一个 div 的内容不会为 stats_div 的内容留出空间.如果要使其内容出现在上一个浮动的 div 的内容之后，则必须清除下一个 div 的一侧.通常，您会看到 clear:both ，它们在正常流 div 的任一边缘上起作用.
Since stats_div is floated, its contents are taken out of the normal flow. Thus, the contents of the next div that is part of the normal flow does not make space for the contents of stats_div. You have have to clear one side of the next div if 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.
这篇关于如何在html和CSS中垂直对齐div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
