Question

在代码段中，两个div应该显示在彼此下方，就好像通过换行符分开一样。相反，两个div彼此相邻，尽管第二个div比第一个稍低。这是为什么？如何获得＆lt; hr＆gt;换线？

<!DOCTYPE html>
<head><title>DoodleDebug</title>
<style>hr{padding:2pt;border:0;}span{float:left;width:40px;}.ColorPlugin{}</style>
</head>
<body>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>
</div>
<hr>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>
</div>

我正在使用最新的Firefox。

Answer 1

问题在于float ing span。它们被带到正常流量之外（类型），因此div最终为0高度。好吧，第二个是，第一个仍然是几个px高，因为hr。无论如何，两个div一起比溢出它们的span小得多。因此，第二个span远高于您的预期。由于float s彼此不重叠，因此第二个span放置在右侧以稍微调整（同时仍保留原始垂直位置）。

然后，解决方案取决于您想要实现的目标。我知道这是一个愚蠢的例子，所以我无法看到更大的图景。我的第一次尝试是完全摆脱float。大多数时候，他们比解决方案更令人头疼。这里的选项是使用display: inline-block或者只是以某种方式重新排列HTML。

第二次尝试是使用clear，这是Brad Christie的suggested below。

Answer 2

这是你的浮动正在打断它的显示方式。当您指定浮动时，您告诉浏览器显示彼此相邻的内容。但是，如果您在clear:both上应用<hr>，则会获得所需效果：

<!DOCTYPE html>
<html>
    <head>
        <title>DoodleDebug</title>
        <style>hr{padding:2pt;border:0;}span{float:left;width:40px;}.ColorPlugin{}</style>
    </head>
    <body>
        <div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span></div>
        <hr style="clear:both;">
        <div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span></div>
    </body>
</html>

Answer 3

你是浮动你的跨度标签而不是你的div，它们由一个包含的div分隔。添加div { float:left }代替浮动实际的span容器..

Answer 4

hr - 是一条水平线，没有换行符......换行换行

<br>

Answer 5

因为代码中有一个float：left属性，所以删除它＆amp;你有你想要的效果。

  <style>hr{padding:2pt;border:0;}span{width:40px;clear:both;}.ColorPlugin{}</style>
</head>
<body>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>
<hr>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>

为什么<hr />没有换行？

5 个答案: