我不知道这是不是一个常见的问题,但是到目前为止我还没有在网络上找到解决方案. 我希望将两个div包装在另一个div中,但是里面的这两个div必须对齐相同的级别(例如:左侧一个占用wrappedDiv的20%宽度,右侧一个占用另外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>

推荐答案

当挡路里有两个浮点时,这是一个常见的问题.修复它的最好方法是在第二个div之后使用clear:both.

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

它应该迫使容器达到正确的高度.

Css相关问答推荐

转换间隙值时基于百分比的弹性元素&跳转

如何在移动屏幕尺寸上包装元素?

当鼠标悬停在元素的::第一行时,如何应用样式?

我应该在哪里放置expo /Reaction本地项目的CSS重置文件?

如何在页面顶部创建固定横幅,并在其下方设置滚动条?

臭虫?嵌套的css供应商前缀中断Chrome css解析

使用tailwind 将父div限制为其具有溢出的最短子级的高度

如何将此 Select 器转换为TailWind类

显示 P 元素中加载数据的空行

CSS 字符串变量的正确null值是多少?

当页面大小小于VH时,Tailwind CSS如何使页脚留在底部

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

使用 MUI 动态绘制多个边框

使用 CSS 剪辑/裁剪背景图像

什么是 ::content/::slotted 伪元素,它是如何工作的?

css3 nth 类型限制为类

内联