我知道这个问题很常见,但我仍然没有做到这一点。我在引导程序中有一个动态的galery填充列,但每次高度都不同,所以我得到了这个结果
我知道clearfix解决了这个问题,但是每次都有更长的列位于不同的位置。
这是我的代码:
<div class="container" >
<div class="row ">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-obJ2fXQMQmg/VawsKPc7b3I/AAAAAAAANSg/DMBlW4LnRos/s208/image.jpg"></p>
<p align="center">Floral silk chiffon with all over beading </p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-zxR4MthXI00/VawsRkw3kLI/AAAAAAAANTg/A5h-HszkUMs/s208/image.jpg"></p>
<p align="center">Large chevron raw silk/cotton with elaborate jewel neck piece</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-kNvVqJ2pt24/UazRmaF_UAI/AAAAAAAABwk/d7tJSITBTYM/s208/image.jpg"></p>
<p align="center">Black satin lace with elaborate beaded trim and 18" fringe</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
<p align="center">Green Modal fabric with elaborate trim </p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"
<p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
<p align="center">Green Modal fabric with elaborate trim </p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
<p align="center">Navy and rose gold silk with elaborate beaded trim</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
<p align="center">Yellow, pink and green crepe with greek key ribbon and paisley patches</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
<p align="center">Red jacquard lace and lined in chiffon with elaborate beaded trim</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
<p align="center">Black Modal fabric with ribbon trim</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
<p align="center">Aztec print charmeuse with circle beaded trim</p>
</div>
</div>
</div>
如何在不使用javascript或其他库的情况下解决此问题,并始终使用不同的屏幕尺寸。
提前致谢
答案 0 :(得分:1)
如果你不想使用JavaScript,你必须为包装器提供最小高度。由于其高度可能随文本而变化,因此会出现对齐问题。
解决此问题的一种常见且快速的方法是使用JavaScript使用等高。这是代码
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).resize(function() { //to work in resize
equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6');
});
$(document).ready(function() {
equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6');
});