我有两个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>
当前回答
我很惊讶没有人提到(非常古老但可靠的)绝对列技术: 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
这是一个很多人都遇到过的常见问题，但幸运的是，一些聪明的人，如埃德·艾略特在他的博客上，已经在网上发布了他们的解决方案。
基本上你要做的就是通过添加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 >
我知道已经很长时间了，但我还是分享我的解决方案。 这是一个jQuery技巧。
——HTML
<div class="custom-column">
<div class="column-left">
asd
asd<br/>
asd<br/>
</div>
<div class="column-right">
asd
</div>
</div>
<div class="custom-column">
<div class="column-left">
asd
</div>
<div class="column-right">
asd
asd<br/>
asd<br/>
</div>
</div>
CSS——
<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
.column-left { float:left; width:25%; background:#CCC; }
.column-right { float:right; width:75%; background:#EEE; }
</style>
——JQUERY
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$balancer = function() {
$('.custom-column').each(function(){
if($('.column-left',this).height()>$('.column-right',this).height()){
$('.column-right',this).height($('.column-left',this).height())
} else {
$('.column-left',this).height($('.column-right',this).height())
}
});
}
$balancer();
$(window).load($balancer());
$(window).resize($balancer());
});
</script>
我只是想添加到Pavlo描述的伟大的Flexbox解决方案，在我的情况下，我有两个列表/列的数据，我想并排显示之间只有一点间距，水平居中封闭的div.通过在第一个(最左边)flex:1 div内嵌套另一个div，并将其浮动在右边，我得到了我想要的。我找不到任何其他方法来做到这一点，并在所有视口宽度上取得一致的成功:
<div style="display: flex;">
<div style="flex: 1; padding-right: 15px;">
<div style="float: right">
<!-- My Left-hand side list of stuff -->
</div>
</div>
<div style="flex: 1; padding-left: 15px;">
<!-- My Right-hand side list of stuff -->
</div>
</div>
你可以使用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/
