我有两个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>
当前回答
你可以使用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/
其他回答
var numexcute = 0;
var interval;
$(document).bind('click', function () {
interval = setInterval(function () {
if (numexcute >= 20) {
clearInterval(interval);
numexcute = 0;
}
$('#leftpane').css('height', 'auto');
$('#rightpane').css('height', 'auto');
if ($('#leftpane').height() < $('#rightpane').height())
$('#leftpane').height($('#rightpane').height());
if ($('#leftpane').height() > $('#rightpane').height())
$('#rightpane').height($('#leftpane').height());
numexcute++;
}, 10);
});
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>
你可以使用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技巧。
——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>
Flexbox
对于flexbox，它是一个单一的声明:
.row { 显示:flex;/*儿童身高相等*/ ｝ .col { flex: 1;/*另外，等于宽度*/ 填充:1 em; 边界:固体; ｝ < div class = "行" > <div class="col">我与你同在，我与你同在</div> <div class="col">我爱你，我爱你，我爱你。</div> .</div> .</div> .</div> < / div >
旧浏览器可能需要前缀，请参阅浏览器支持。
