Question

我不知道这是否是一个常见问题，但到目前为止我无法在网络上找到解决方案。我想在另一个div中包含两个div，但是这里面的两个div必须对齐相同的级别（例如：left one占用wrappedDiv的20％宽度，右边一个占80％）。为了达到这个目的，我使用了以下示例CSS。但是，现在换行DIV并没有包装所有div。包裹Div的高度小于内部包含的两个div。我怎么能确保包装Div具有最大的高度作为包含的div？感谢!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>

Answer 1

除clear: both hack之外，您可以跳过额外的元素并在包装overflow: hidden上使用div：

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

Answer 2

当一个块内有两个浮点数时，这是一个常见的问题。修复它的最佳方法是在第二个clear:both之后使用div。

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

它应该强制容器达到正确的高度。

Answer 3

这应该这样做：

<div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>

Answer 4

overflow:hidden（如@Mikael S所述）并不适用于所有情况，但它应该适用于大多数情况。

另一种选择是使用:after技巧：

<div class="wrapper">
  <div class="col"></div>
  <div class="col"></div>
</div>

.wrapper {
  min-height: 1px; /* Required for IE7 */
  }

.wrapper:after {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: ".";
  font-size: 0;
  }

.col {
  display: inline;
  float: left;
  }

对于IE6：

.wrapper { height: 1px; }

Answer 5

浮动一切。

如果你在非浮动的div中有一个浮动的div，一切都变得棘手了。这就是为什么像Blueprint和960.gs这样的大多数CSS框架都使用浮动容器和divs。

要回答您的具体问题，

<div class="container">
<!--
.container {
  float: left;
  width: 100%;
}
-->
  <div class="sidebar">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
  <div class="content">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
</div>

只要您float:left; <div> {{1}}，就可以正常工作。

Answer 6

使用这个CSS hack，它为我节省了很多麻烦和时间。

http://swiftthemes.com/2009/12/css-tips-and-hacks/problem-with-height-of-div-containing-floats-and-inline-lists/

我在每个项目中都使用它。

Answer 7

这是另一个，我觉得很有帮助。它甚至可以用于响应式CSS设计。

#wrap
{
   display: table;
   table-layout: fixed; /* it'll enable the div to be responsive */
   width: 100%; /* as display table will shrink the div to content-wide */
}

警告：但是这个理论不适用于持有者包含具有绝对位置的内部元素。它会给固定宽度的布局带来问题。但对于响应式设计，它非常出色。：）

对Meep3D的ANSWER

的补充

使用CSS3，在动态部分中，您可以通过以下方式将clear float添加到最后一个元素：

#wrap [class*='my-div-class']:last-of-type {
  display: block;
  clear: both;
}

你的div是：

<div id="wrap">
<?php for( $i = 0; $i < 3; $i++ ) {
   <div class="my-div-class-<?php echo $i ?>>
      <p>content</p>
   </div> <!-- .my-div-class-<?php echo $i ?> -->
}
</div>

<强>参考：

:last-of-type - CSS-TRICKS

Answer 8

在这里，我向您展示了一个解决问题的片段（我知道，自您发布以来已经太久了，但我认为这比de＆＃34; clear＆＃34; fix）更清洁< / p>

＆＃13;

#nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          overflow: hidden
        }

＆＃13;

    <div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
    </div>

＆＃13;

Answer 9

<html>
<head>
    <style>
        #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
        #one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
        #two { width: 80%; height: 100%; background-color: red; display: inline-block; }
    </style>
</head>
<body>
<div id="main">
    <span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>

秘密是inline-block。如果使用边框或边距，则可能需要减小使用它们的div的宽度。

注意：如果使用“DIV”而不是“SPAN”，则在IE6 / 7中无法正常工作。（见http://www.quirksmode.org/css/display.html）

Answer 10

为什么不简单地设置一个固定的高度，而不是使用overflow:hidden，这是一种黑客攻击，例如height:500px，到父母部门？

Answer 11

HTML

<div id="wrapper">
    <div id="nav"></div>
    <div id="content"></div>      
    <div class="clearFloat"></div>
</div>

CSS

.clearFloat {
    font-size: 0px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 0px;
}

如何使div包含两个浮点div？

11 个答案:

对Meep3D的ANSWER