我有两个div元素并排。我希望它们的高度是相同的，并保持不变，如果其中一个调整大小。如果其中一个增长是因为放入了文本，那么另一个也应该增长以匹配高度。不过我还是搞不懂这个。什么好主意吗?
<div style="overflow: hidden"> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> </div> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content! </div> </div>
当前回答
这个问题在6年前就被提出了，但在今天，它仍然值得用flexbox布局给出一个简单的答案。
只需添加以下CSS到父<div>，它将工作。
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
前两行声明它将显示为flexbox。而flex-direction: row告诉浏览器它的子元素将显示在列中。align-items: stretch将满足这样的要求，即当其中一个子元素变高时，所有子元素将拉伸到相同的高度。
其他回答
CSS网格方式
这样做的现代方法(这也避免了必须在每两个项目周围声明一个<div class="row"></div>-包装器)将使用CSS网格。这也使您可以轻松控制项目行/列之间的间隙。
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */ grid-row-gap: 10px; grid-column-gap: 10px; } .grid-item { background-color: #f8f8f8; box-shadow: 0 0 3px #666; text-align: center; } .grid-item img { max-width: 100%; } <div class="grid-container"> <div class="grid-item">1 <br />1.1<br />1.1.1</div> <div class="grid-item">2</div> <div class="grid-item">3 <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" /> 3.1 </div> <div class="grid-item">4</div> <div class="grid-item">5 <br />1.1<br />1.1.1</div> <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" /> 6.1</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9 <br />1.1<br />1.1.1</div> <div class="grid-item">10</div> <div class="grid-item">11 <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" /> 11.1 </div> <div class="grid-item">12</div> </div>
Flexbox
对于flexbox，它是一个单一的声明:
.row { 显示:flex;/*儿童身高相等*/ ｝ .col { flex: 1;/*另外，等于宽度*/ 填充:1 em; 边界:固体; ｝ < div class = "行" > <div class="col">我与你同在，我与你同在</div> <div class="col">我爱你，我爱你，我爱你。</div> .</div> .</div> .</div> < / div >
旧浏览器可能需要前缀，请参阅浏览器支持。
我几乎已经尝试了上面提到的所有方法，但是flexbox解决方案不能正确地与Safari一起工作，网格布局方法也不能正确地与旧版本的IE一起工作。
这个解决方案适合所有屏幕，并且是跨浏览器兼容的:
.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}
@media (max-width: 767px){
.container li { display: inline-block; width:100%; min-height:auto!important;}
}
上面的方法将等于单元格的高度，对于较小的屏幕，如手机或平板电脑，我们可以使用上面提到的@media方法。
这是一个很多人都遇到过的常见问题，但幸运的是，一些聪明的人，如埃德·艾略特在他的博客上，已经在网上发布了他们的解决方案。
基本上你要做的就是通过添加padding-bottom: 100%使两个div /column都非常高，然后使用margin-bottom: -100%“欺骗浏览器”认为它们没有那么高。埃德·艾略特在他的博客上有更好的解释，其中也有很多例子。
.container { 溢出:隐藏; ｝ .column { 浮:左; 保证金:20 px; 背景颜色:灰色; padding-bottom: 100%; margin-bottom: -100%; ｝ < div class = "容器" > < div class = "列" > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > < / div > < div class = "列" > 某物 < / div > < / div >
如果你不介意其中一个divs是一个主人，并口述两个divs的高度，有这个:
小提琴
无论如何，右边的div会扩展或压缩&溢出来匹配左边的div的高度。
两个div都必须是容器的直接子节点，并且必须在容器中指定它们的宽度。
相关的CSS:
.container {
background-color: gray;
display: table;
width: 70%;
position:relative;
}
.container .left{
background-color: tomato;
width: 35%;
}
.container .right{
position:absolute;
top:0px;
left:35%;
background-color: orange;
width: 65%;
height:100%;
overflow-y: auto;
}
