我有两个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>
当前回答
这是一个很多人都遇到过的常见问题，但幸运的是，一些聪明的人，如埃德·艾略特在他的博客上，已经在网上发布了他们的解决方案。
基本上你要做的就是通过添加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 >
其他回答
使用CSS Flexbox和min-height对我来说很有效
假设你有一个容器，里面有两个div，你想让这两个div有相同的高度。
你可以在容器上设置" display: flex "以及" align-items: stretch "
然后给孩子divs一个100%的“min-height”
请参阅下面的代码
.container { width: 100%; background: linear-gradient(red,blue); padding: 1em; /* important */ display: flex; /* important */ align-items: stretch; justify-content: space-around; } .child { width: 100%; background: white; color: grey; margin: 0 .5em; padding: .5em; /* important */ min-height: 100%; } <div class="container"> <div class="child"><p>This is some text to fill the paragraph</p></div> <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></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/
使用jQuery
使用jQuery，您可以在一个超级简单的单行脚本中完成这个任务。
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
使用CSS
这个更有趣一点。这种技术被称为人造柱。或多或少，你并没有设置实际的高度，但你设置了一些图形元素，让它们看起来一样高。
你可以使用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
我只是想添加到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>
