2

我有以下 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 样式来解决这个问题？

4

5 回答 5

9

在浮动div之后立即出现： stats_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。如果你希望它的内容在前一个 float 的内容之后，你必须clear在下一个的一侧。您经常会看到，它适用于正常流程的任一边缘。divdivclear: bothdiv

于 2012-06-28T14:04:55.527 回答
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>

于 2012-06-28T14:03:22.797 回答
2

看看我的例子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 元素执行此操作，您将获得同一“行”上的所有元素（如果它们可以站立并且不会溢出，显然）。你可以在这里看到。

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

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

于 2012-06-28T14:09:21.577 回答
0

如果可以的话，改变你的源顺序，让 stats_div 先出现，然后使用 float:right 就可以了。

于 2012-06-28T14:01:31.607 回答
0 
<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 中，效果将可见

于 2012-06-28T14:11:17.660 回答