如何使一个div包裹两个浮动的div？

Question

如何使一个div包裹两个浮动的div？

76

我不知道这是否是一个普遍的问题，但是到目前为止，我在网络上找不到解决方案。我想要在一个 div 元素中包含两个 div 元素，然而这两个内部元素必须对齐（例如：左边的元素占所包含 div 元素的 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>

- WilliamLou

11个回答

74

当你在一个块中有两个浮动元素时，这是一个常见的问题。最好的解决方法是在第二个 div 后使用 clear:both。

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

它应该强制容器具有正确的高度。

- Meep3D

43

一个 div 元素已经是块级元素，所以你可以从你的样式中删除它。 - mbillard

8

这应该可以解决问题：

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

- jerjer

8

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; }

- Thomas J Bradley

4

将所有内容浮动。

如果您在非浮动的div中放置了一个浮动的div，那么一切都会变得混乱。这就是为什么大多数CSS框架（如Blueprint和960.gs）都使用浮动容器和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，那么它应该可以正常使用。

- Alex Lane

3

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

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

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

- Satish Gandham

2

在这里，我向您展示了一个代码片段，可以解决您的问题（我知道您发布了很长时间，但我认为这比“清除”修复更干净）。

#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
        }

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

- Fernando Carrascosa

2

这是另一个我发现很有帮助的方法。它甚至适用于响应式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 答案的补充

使用CSS3，在动态部分，你可以通过以下方式为最后一个元素添加清除浮动：

#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

（注：该段文字为HTML代码，无法直接翻译）

- Mayeenul Islam

1

<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”而不是“SPAN”，则在IE6/7中无法正常工作。（请参见http://www.quirksmode.org/css/display.html）

- lepe

1

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;
}

- Sebachenko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mikael S · Accepted Answer

120

除了使用clear:both技巧之外，您还可以跳过额外元素，直接在包装的div上使用overflow:hidden：

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

- Mikael S

7

我最喜欢的是使用overflow:hidden方法。 - Cyril Gupta

9

我很高兴有人把这个发上来……当有人为了消除浮动而添加一个元素时，我会感到很疯狂，因为那只是一个 CSS 问题。 - tybro0103

1

它可以与overflow:auto;一起使用。我认为它比div clear更优雅，是一种更优秀的overflow“hack”。 - Alex Dn

4

这样做有一些缺点，该网站还认为使用 .container { word-wrap: break-word; } 和 .container img { max-width: 100%; height: auto; } 可以使大型内容表现更好。 - Kos

这似乎在我的包含两个浮动div的body元素上不起作用。即使使用了overflow:hidden，body也无法占据内部元素的大小。我一直使用这种方法，不知道为什么它不起作用，请帮忙！ - A. Sallai

显示剩余2条评论