我有两个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从未真正有过任何解决方案的领域——你只能使用<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。
其他回答
你可以使用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
你可以使用Jquery的等高插件来完成，这个插件使所有的div的高度完全相同。如果其中一个生长了，其他的也会生长。
下面是一个实现示例
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
这是链接
http://www.cssnewbie.com/equalheights-jquery-plugin/
我最近遇到了这个问题，我不太喜欢这个解决方案，所以我尝试了一下。
.mydivclass {inline-block;vertical-align:中间;宽度:33%;}
如果你不介意其中一个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;
}
这是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。
