logo标签列表

CSS容器不会自动拉伸以适应浮动元素。

htmlcsscss-float
21
<html>

<head>

<style type="text/css">

  .container {
      width: 900px;
      border: 2px solid #333333;
      padding-top: 30px;
      padding-bottom: 30px;
  }

  .container_left {
      border: 2px solid #FF00FF;
      width: 650px;
      float: left;
  }

  .container_right {
      border: 2px solid #0000FF;
      width: 225px;
      float: right;
  }

</style>
</head>

<body>

    <div class="container">
        <div class="container_left">
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        </div>

        <div class="container_right">
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        </div>
    </div>

</body>
</html>
结果如下：

结果为：
result

我想要一个像这样的结果：
desired result

7个回答
39
将 overflow: hidden; 添加到 .container 选择器中。这将强制容器意识到它有子元素。
19
如果让拖欠赡养费的父亲们也这么容易就好了！ :) - Pekka
25
12

一个快速的解决方法是在你的.container中添加overflow: hidden。

这并不是最好的解决方法，只是最快速的解决方案。你最好的解决方案是实现并应用清除浮动技巧（clearfix），因为它不会出现由于溢出而引起的打印问题。

如果你使用overflow: auto或overflow: hidden，并且用户尝试打印页面，则无法适合打印页面的内容将被剪切，因为：

  1. 滚动条不会打印
  2. 隐藏内容不会显示
1
+1 因为这是唯一提到 overflow 方法缺点的回答。同时，值得一提的是，这种方法可能会导致内容溢出而产生不必要的裁剪/滚动条。 - eyelidlessness
5

一种选择是在容器 div 关闭标签之前加入一个 <div style="clear: both;"></div>。

<div class="container">

    <div class="container_left">
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    </div>

    <div class="container_right">
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    </div>

    <div style="clear: both;"></div>

</div>
1
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

将 .clear 应用于您的父元素。

1
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接