如何制作一个div在里面包装两个浮动div ?

时间：2022-11-24 23:38:19

I don't know if it's a common problem, but I can't find the solution in web so far. I would like to have two divs wrapped inside another div, however these two divs inside have to be align the same level (for example: left one takes 20%width of the wrappedDiv, right one take another 80%). To achieve this purpose, I used the following example CSS. However, now the wrap DIV didn't wrap those divs all. The wrap Div has a small height than those two divs contained inside. How could I make sure that the wrap Div has the largest height as the contained divs? Thanks!!!

我不知道这是不是一个普遍的问题，但我在网络上还找不到解决方案。我希望在另一个div中包含两个div，但是其中的两个div必须对齐相同的级别(例如:左div的宽度为wrappedDiv的20%，右div的宽度为80%)。为了达到这个目的，我使用了下面的CSS示例。然而，现在wrap DIV并没有将所有的DIV都打包。wrap Div比包含在其中的两个Div具有更小的高度。如何确保wrap 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>

11 个解决方案

#1

70  

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

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

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

It should force the container to be the correct height.

它应该迫使容器保持正确的高度。

#2

113  

Aside from the clear: both hack, you can skip the extra element and use overflow: hidden on the wrapping div:

除了clear: both hack，您可以跳过额外的元素并使用overflow:隐藏在包装div:

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

#3

8  

This should do it:

这应该这样做:

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

#4

7  

overflow:hidden (as mentioned by @Mikael S) doesn't work in every situation, but it should work in most situations.

溢出:隐藏(如@Mikael S提到的)并非在所有情况下都有效，但在大多数情况下都应该有效。

Another option is to use the :after trick:

另一个选择是使用:after trick:

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

And for IE6:

对于IE6:

.wrapper { height: 1px; }

#5

3  

Float everything.

浮动的一切。

If you have a floated div inside a non-floated div, everything gets all screwy. That's why most CSS frameworks like Blueprint and 960.gs all use floated containers and divs.

如果在非浮动的div中有浮动的div，那么一切都会变得一团糟。这就是为什么大多数CSS框架，如Blueprint和960。所有的gs都使用浮动容器和divs。

To answer your particular question,

要回答你的问题，

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

should work just fine, as long as you float:left; all of your <div>s.

只要你飘浮，就应该工作得很好:左;你所有的< div >。

#6

3  

Use this CSS hack, it saved me lot of trouble and time.

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

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

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

I use it in every project.

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

#7

2  

Here's another, I found helpful. It works even for Responsive CSS design too.

还有一个，我觉得很有帮助。它甚至可以为响应式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 */
}

WARNING: But this theory won't work for holder contains inner elements with absolute positions. And it will create problem for fixed-width layout. But for responsive design, it's just excellent. :)

警告:但是这个理论不适用于含绝对位置的内部元素。这会给固定宽度的布局带来问题。但是对于响应性设计来说，它非常棒。:)

ADDITION TO Meep3D's ANSWER

With CSS3, in a dynamic portion, you can add clear float to the last element by:

对于CSS3，在动态部分，可以通过以下方式向最后一个元素添加clear float:

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

Where your divs are:

你的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>

Reference:

参考:

#8

2  

Here i show you a snippet where your problem is solved (i know, it's been too long since you posted it, but i think this is cleaner than de "clear" fix)

这里我向您展示了一个解决您的问题的代码片段(我知道，您发布它已经太长时间了，但是我认为这比de“clear”修复更简洁)

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

#9

1  

Instead of using overflow:hidden, which is a kind of hack, why not simply setting a fixed height, e.g. height:500px, to the parent division?

不要使用overflow:hidden，这是一种hack，为什么不简单地设置一个固定的高度，例如高度:500px，给父划分?

#10

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>

The secret is the inline-block. If you use borders or margins, you may need to reduce the width of the div that use them.

秘密在于内线块。如果您使用边界或边界，您可能需要减少使用它们的div的宽度。

NOTE: This doesn't work properly in IE6/7 if you use "DIV" instead of "SPAN". (see http://www.quirksmode.org/css/display.html)

注意:如果您使用“DIV”而不是“SPAN”，那么在IE6/7中这是不能正常工作的。(参见http://www.quirksmode.org/css/display.html)

#11

1  

HTML

HTML

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

CSS

CSS

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

#1

70  

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

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

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

It should force the container to be the correct height.

它应该迫使容器保持正确的高度。

#2

113  

Aside from the clear: both hack, you can skip the extra element and use overflow: hidden on the wrapping div:

除了clear: both hack，您可以跳过额外的元素并使用overflow:隐藏在包装div:

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

#3

8  

This should do it:

这应该这样做:

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

#4

7  

overflow:hidden (as mentioned by @Mikael S) doesn't work in every situation, but it should work in most situations.

溢出:隐藏(如@Mikael S提到的)并非在所有情况下都有效，但在大多数情况下都应该有效。

Another option is to use the :after trick:

另一个选择是使用:after trick:

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

And for IE6:

对于IE6:

.wrapper { height: 1px; }

#5

3  

Float everything.

浮动的一切。

If you have a floated div inside a non-floated div, everything gets all screwy. That's why most CSS frameworks like Blueprint and 960.gs all use floated containers and divs.

如果在非浮动的div中有浮动的div，那么一切都会变得一团糟。这就是为什么大多数CSS框架，如Blueprint和960。所有的gs都使用浮动容器和divs。

To answer your particular question,

要回答你的问题，

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

should work just fine, as long as you float:left; all of your <div>s.

只要你飘浮，就应该工作得很好:左;你所有的< div >。

#6

3  

Use this CSS hack, it saved me lot of trouble and time.

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

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

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

I use it in every project.

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

#7

2  

Here's another, I found helpful. It works even for Responsive CSS design too.

还有一个，我觉得很有帮助。它甚至可以为响应式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 */
}

WARNING: But this theory won't work for holder contains inner elements with absolute positions. And it will create problem for fixed-width layout. But for responsive design, it's just excellent. :)

警告:但是这个理论不适用于含绝对位置的内部元素。这会给固定宽度的布局带来问题。但是对于响应性设计来说，它非常棒。:)

ADDITION TO Meep3D's ANSWER

With CSS3, in a dynamic portion, you can add clear float to the last element by:

对于CSS3，在动态部分，可以通过以下方式向最后一个元素添加clear float:

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

Where your divs are:

你的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>

Reference:

参考:

#8

2  

Here i show you a snippet where your problem is solved (i know, it's been too long since you posted it, but i think this is cleaner than de "clear" fix)

这里我向您展示了一个解决您的问题的代码片段(我知道，您发布它已经太长时间了，但是我认为这比de“clear”修复更简洁)

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

#9

1  

Instead of using overflow:hidden, which is a kind of hack, why not simply setting a fixed height, e.g. height:500px, to the parent division?

不要使用overflow:hidden，这是一种hack，为什么不简单地设置一个固定的高度，例如高度:500px，给父划分?

#10

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>

The secret is the inline-block. If you use borders or margins, you may need to reduce the width of the div that use them.

秘密在于内线块。如果您使用边界或边界，您可能需要减少使用它们的div的宽度。

NOTE: This doesn't work properly in IE6/7 if you use "DIV" instead of "SPAN". (see http://www.quirksmode.org/css/display.html)

注意:如果您使用“DIV”而不是“SPAN”，那么在IE6/7中这是不能正常工作的。(参见http://www.quirksmode.org/css/display.html)

#11

1  

HTML

HTML

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

CSS

CSS

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

相关文章