如何在html和css中垂直对齐div？答案

【问题标题】：how to align divs vertically in html and css?如何在html和css中垂直对齐div？
【发布时间】：2012-06-28 22:46:32
【问题描述】：

我有以下 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>
...

我想要做的是显示第一个 div（包含条形图）和第二个 div（包含图表中的一些文本），然后在它们下方显示其他两个 div（包含其他图表) 一个接一个地垂直，即我希望它看起来像：

而我目前得到的是：

cdfChart_div (div4) 显示在 lineChart_div(div3) 的顶部。我需要使用什么 CSS 样式来解决这个问题？

【问题讨论】：

标签： html css

【解决方案1】：

在div 紧接在浮动 stats_div 之后：

style="clear:left;"

jsFiddle Demo

完整代码：

...
<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 的内容之后，您必须clear 下一个div 的一侧。通常你会看到clear: both，它在正常流div的任一边缘工作。

【讨论】：

【解决方案2】：

试试

<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>

【讨论】：

保持 css 内联不是一个好的选择（知道用户编写该代码，但帮助他理解）

【解决方案3】：

看看我的例子here

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

#barChart_div, #stats_div { float:left; }
#lineChart_div { clear:left; }

说明

首先要记住，“内嵌”CSS 并不是一个好习惯。您必须更喜欢外部 CSS 或内部（即标题）css。

但是，让我们看看这个例子：jsFiddle。
如您所见，如果您没有指定不同的方式，所有 div 都将生成“理想列”。那是因为“html解析器”的正常流程会将它们放在那个位置。

如果您使用 span 元素执行此操作，那么您将获得同一“行”上的所有元素（如果它们可以站立并且不会溢出，显然）。你可以看到here。

当您告诉float:left 时，您是在“强制”将 div 浮动在前一个元素的“右边距”处。

现在，由于第二个元素浮动，第三个元素将以相同的方式运行。
要充当“标准”，您必须使用 clear:left 这将恢复“正常”行为

【讨论】：

它可以工作.. 但你能解释一下它是如何工作的吗？
DonCallisto：因为barChart_div 是向右浮动的，并且因为lineChart_div 是向左浮动的，所以当您使视口变宽时，lineChart_div 最终会出现在打破布局的第一行。如果您将视口设置得更宽，那么cdfChart_div 将出现在lineChart_div 右侧的第一行。
@JohnB : 更新了...第一次没注意到，但在“解释”中我会忘记更新代码；）

【解决方案4】：

如果可以，请更改源顺序，使 stats_div 先出现，然后在 just 上使用 float:right。

【讨论】：

它有效.. 但第二个 div 向右走得很远.. 我希望它紧挨着第一个没有空格。

【解决方案5】：

<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>

粘贴到你的html中，效果就可见了

【讨论】：