包装尺寸反映其内容

Question

Take a look at this Fiddle

我很困惑为什么#wrapper不会扩展以容纳其中的div。这里缺少什么？

作为附注，有关为什么我的<hr>无法正常显示的任何想法？

Answer 1

包装器不会展开，因为里面的项目是浮动的并从文档的自然流中取出。

您可以通过在包装器的末尾添加块级元素并告诉它清除所有浮动来告诉包装器扩展浮动元素：

#wrapper:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
}

此外，您将包装器的高度设置为100px。

以下是您的小提琴的更新版本：http://jsfiddle.net/kWJ79/9/

至于你的hr，你究竟想做什么？看起来你想要在2个div之间创建一个垂直条。这是对的吗？

<强>更新

如果您想在左右div之间创建一条线，我会考虑稍微不同的路线。

我要做的是将左侧div放在自己的容器中，该容器具有正确的填充，边距和边框。这样，您的代码中就没有冗余的div，并且需要使用hr。

以下是此示例的更新小提琴：http://jsfiddle.net/kWJ79/15/

#left_wrapper{
    margin-right:5px;
    padding-right: 5px;
    border-right:1px solid red;
    float:left;
}

请注意，我已从float:left; div中删除了#left，并将其放在#left_wrapper上。

Answer 2

您已指定高度值。