我认为这个标记应该可以工作,但我一定做错了什么。我有两个 div,我希望它们具有相同的高度并在调整窗口大小时动态调整大小。当框内的文本换行时,其中一个框变得更高。
编辑:两个 div 并排,我希望较短的 div 调整为与较高的 div 相同的高度。如果用户有一个屏幕较小的设备或将窗口大小调整为更小,则会导致文本在一个框中换行。无论用户如何更改窗口大小,我都希望它们保持相同的高度。
JS
$(document).ready(function () {
$('div.subFeaturedContainer > section').each(function() {
var $sameHeightChildren = $(this).find('.subFeatured');
var maxHeight = 0;
$sameHeightChildren.each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
});
$sameHeightChildren.css({ height: maxHeight + 'px' });
});
});
HTML
<div class="subFeaturedContainer">
<section class="subFeatured">
<h2>Header</h2>
<a href="#">Nam vel risus mauris, id lacinia nulla</a>
</section>
<section class="subFeatured">
<h2>Header</h2>
<a href="#">Donec tincidunt tellus ac dolor tristique blandit. Nam vel iaculis lorem.</a>
</section>
</div>
CSS
.subFeatured {
width: 43.5%;
float: left;
background: rgba(0, 0, 0, 0.7);
border-top: 1px solid #b1bdbe;
padding: 2% 3% 2% 3%;
}
.subFeatured:nth-child(even) {
float: right;
}