这是 Jsfiddle我的问题。
基本上,我在我的网站上有一个显示器,显示一些图片,下面有文字。我遇到的问题是图片下方的文字距离图片本身太远且未对齐。
图像不是静态高度。宽度始终为 80 像素,但高度在 80 像素到 150 像素之间变化,并且
如您所见,图像看起来没有对齐。我想要做的就是将图像下方的文本排成一行,位于高度最高的图像下方。
HTML
<ul class="list-items list-carousel no-js">
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/100/sports" />
</div>
<div>SPORTS</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/140/fashion" />
</div>
<div>FASHION</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/120/animals" />
</div>
<div>ANIMALS</div>
</li>
</ul>
CSS
ul {
list-style: none;
padding: 0;
margin: 0 0 10px 25px;
}
.ccarousel-item {
float: left;
overflow: hidden;
display: inline-block;
zoom: 1;
margin: 0;
padding: 0;
}
.pImgContainer {
height: auto;
width: 120px;
line-height: 110px;
padding-top: 10px;
margin: 0 auto;
}
编辑:我稍微更改了 HTML。我在 Fiddle 中重现我的代码时犯了一个错误
最佳答案
http://jsfiddle.net/27yj94v8/1/
ul{list-style:none;padding:0;margin:0 0 10px 25px;}
.ccarousel-item{float:left;overflow:hidden;display:inline-block;zoom:1;margin:0;padding:0;}
.pImgContainer{height:auto;width:120px;padding-top:10px;margin:0 auto;}
img+div{margin:0;padding:0;display:block;}
关于javascript - 我如何根据图像大小自动调整我的div的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25804665/