如何根據圖像尺寸自動調整div的高度

Question

這是的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。 我在小提琴中復制代碼時犯了一個錯誤

Answer 1

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;}

Answer 2

作為一個開始

.pImgContainer div{
  bottom:0;
  position:absolute;
}

。

JSFIDDLE

為了獲得更好的體驗，請設置

.ccarousel-item {
  position:relative;
  float: left;
  display: inline-block;
  zoom: 1;
  margin: 0;
  padding: 0;
}

.pImgContainer {
  height:150px;
  width: 120px;
  line-height:110px;
  padding-top: 10px;
  margin: 0 auto;
}

.pImgContainer + div{
  bottom:-15px;
  position:absolute;
}

。

JSFIDDLE

Answer 3

將標題div從div.pImgContainer 。

<li class="ccarousel-item">
    <div class="pImgContainer fk-text-center">
        <img src="http://lorempixel.com/80/100/sports" />

    </div>
    <div>SPORTS</div>
</li>

並在CSS中添加圖片容器的最小高度（或僅高度）：

.pImgContainer{
   min-height:150px;//the maximum height a picture could be
}

Answer 4

問題在css中：

.pImgContainer {
   height: auto;
   width: 120px;
   line-height: 110px; //Remove the line-height.
   padding-top: 10px;
   margin: 0 auto;
}

Answer 5

只需將.pImgContainer的高度設置為150px，因為您知道這是您將擁有的最高價值。

http://jsfiddle.net/27yj94v8/9/

.pImgContainer {
   height:auto;
   width: 120px;
   line-height:110px;
   padding-top: 10px;
   margin: 0 auto;
   height:150px;
 }

Answer 6

試試下面的mod

http://jsfiddle.net/t0o5gy5v/

<ul class="list-items list-carousel no-js">
<li class="ccarousel-item">
    <div class="pImgContainer fk-text-center">
        <div class="image-box"> <img src="http://lorempixel.com/80/100/sports" /></div>
        <div>SPORTS<div>
    </div>
</li>
<li class="ccarousel-item">
    <div class="pImgContainer fk-text-center">
        <div class="image-box"><img src="http://lorempixel.com/80/140/fashion" /></div>
        <div>FASHION</div>
    </div>
</li>
<li class="ccarousel-item">
    <div class="pImgContainer fk-text-center">
        <div class="image-box"> <img src="http://lorempixel.com/80/120/animals" /></div>
        <div>ANIMALS</div>
    </div>
</li>

ul {list-style：none; 填充：0; 邊距：0 0 10px 25px; } .ccarousel-item {float：left; 溢出：隱藏； 顯示：inline-block; 縮放：1； 邊距：0; 填充：0; } .pImgContainer {height：auto; 寬度：120像素； 行高：110px； padding-top：10像素； 保證金：0自動; } .pImgContainer div {line-height：20px; }

.pImgContainer .image-box {height：150px; }