我希望使用JQuery创建具有相等高度和行的div。我卡住了!
有什么想法可以使第一行等于第二行?我找到了一个示例,在这里,当您取消选择“按行”时,所有行都变得相等。只是不确定如何做到这一点。
有什么想法可以使第一行等于第二行?我找到了一个示例,在这里,当您取消选择“按行”时,所有行都变得相等。只是不确定如何做到这一点。
jQuery(document).ready(function($) {
equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('.main article');
});
$(window).resize(function(){
equalheight(' article');
});
});
.landingpage .main article {
float: left;
width: 29.33%;
background: #ccc;
margin: 10px 1%;
padding: 1%;
}
@media all and (max-width: 800px) {
.landingpage .main article {
width: 100%
}
<div class="landingpage">
<section class="main">
<article>CPR & AED Classes <BR>1 </article>
<article>CPR & First Aid Classes</article>
<article>BLS Classes<BR>1</article>
<article>EMSA Pediatric Classes</article>
<article>Instructor Training </article>
<article>Water Safety<BR>1<BR>1</article>
</section>
</div>