如何让2个并列的div自动等高（不设高度）

最新推荐文章于 2022-05-09 22:13:44 发布

原创最新推荐文章于 2022-05-09 22:13:44 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

html/css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种称为“内外补丁法”的网页布局技术，该技术通过使用 CSS 的 padding 和 margin 属性来解决浮动元素导致的高度塌陷问题。通过在左右两个浮动块中分别应用内补丁（padding-bottom）和外补丁（margin-bottom），可以有效地避免父容器高度丢失，确保页面布局的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内外补丁法

* { margin:0; padding:0; }

#wrap {

overflow:hidden;/*// (这行代码是重点，否则你会看到页面很长很长)*/

padding:0;

padding-left:180px;/*（内补丁）*/

}

#left,#right {

height:auto;

margin-bottom:-10000px;/*（外补丁）*/

padding-bottom:10000px;/*（内补丁）*/

}

#left {

display:inline;

float:left;

width:180px;

margin-left:-180px;/*（外补丁）*/

background: #0CF;

}

#right{
    float:right;
    width:100%;
    background: #FC6;
}

<div id="wrap">
    <div id="left">11111<br>111<br>11111<br>1111111<br><br></div>
    <div id="right">
    </div>
</div>