如何使一个 div 包装两个浮动 div 内？

我不知道这是否是一个常见的问题，但我不能找到解决方案，在网络上迄今为止。 我希望在另一个 div 中包装两个 div，但是这两个 div 必须对齐相同的级别(例如: 左边一个使用了包装 div 的20% 宽度，右边一个使用了另一个80% 宽度)。为了达到这个目的，我使用了下面的示例 CSS。然而，现在 wragDIV 并没有完全包装这些 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>
126290 次浏览
小开
最佳答案

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.

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

It should force the container to be the correct height.

小开

This should do it:

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

除了abc0 hack之外，您还可以跳过额外的元素，并在包装abc2上使用abc1:

<div style="overflow: hidden;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
小开 
<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.

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

小开

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

Another option is to use the :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:

.wrapper { height: 1px; }
小开

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.

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.

小开

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?

小开

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

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.

小开

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

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

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

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

Where your divs are:

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

小开

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)

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


提交答案