我有两个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>
当前回答
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>
其他回答
我很惊讶没有人提到(非常古老但可靠的)绝对列技术: http://24ways.org/2008/absolute-columns/
在我看来，它远远优于假列和一个真正的布局的技术。
一般的思想是一个具有位置的元素:绝对;将对最近的父元素进行定位，该父元素具有position: relative;然后通过赋值top: 0px;底部:0px;(或任何你实际需要的像素/百分比。)这里有一个例子:
<!DOCTYPE html>
<html>
<head>
<style>
#container
{
position: relative;
}
#left-column
{
width: 50%;
background-color: pink;
}
#right-column
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
background-color: teal;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
<div id="right-column">
Lorem ipsum
</div>
</div>
</body>
</html>
你可以使用jQuery轻松实现这一点。
CSS
.left, .right {border:1px solid #cccccc;}
jQuery
$(document).ready(function() {
var leftHeight = $('.left').height();
$('.right').css({'height':leftHeight});
});
HTML
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet.</p>
</div>
你需要包含jQuery
这个问题在6年前就被提出了，但在今天，它仍然值得用flexbox布局给出一个简单的答案。
只需添加以下CSS到父<div>，它将工作。
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
前两行声明它将显示为flexbox。而flex-direction: row告诉浏览器它的子元素将显示在列中。align-items: stretch将满足这样的要求，即当其中一个子元素变高时，所有子元素将拉伸到相同的高度。
我最近遇到了这个问题，我不太喜欢这个解决方案，所以我尝试了一下。
.mydivclass {inline-block;vertical-align:中间;宽度:33%;}
这是CSS从未真正有过任何解决方案的领域——你只能使用<table>标记(或使用CSS display:table* values伪造它们)，因为这是唯一实现“保持一堆元素相同高度”的地方。
< span style=" font - family:宋体;"> < span style=" font - family:宋体;"显示:表格单元;" > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > < / div > < span style=" font - family:宋体;"显示:表格单元;" > 一些内容! < / div > < / div >
这适用于所有版本的Firefox, Chrome和Safari，至少版本8的Opera，以及版本8的IE。
