css – 如何使一个div包装两个浮动div在里面？

我不知道这是一个常见的问题，但我找不到解决方案在web到目前为止。
我想有两个div包装在另一个div，但是这两个div在里面必须对齐相同的水平(例如：左边一个占用20％的宽度的wrappedDiv，右边一个采取另一个80％)。为了实现这个目的，我使用了下面的示例CSS。然而，现在wrap DIV没有包装那些div全部。包装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>

解决方法

这是一个常见的问题，当你有两个浮动块内。修复它的最好方法是使用clear：两个后面的div。

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

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

原文地址：https://www.jb51.cc/css/223649.html

css – 如何使一个div包装两个浮动div在里面？

解决方法

相关推荐