jquery – 将多个图像(带字幕)对齐到基线,所有不同的高度

.thePics {
padding:5px;
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 24px;
float: left;
 width:200px;
 height:auto;
 border:1px;
 text-align:left;


}

#PICS {
 width:auto;
}

如果你的字幕也都是不均匀的长度,那么FlexBox是你最好的纯CSS选项.

http://codepen.io/cimmanon/pen/vJeDk

<div class="gallery">
  <figure>
    <img src="http://placehold.it/100x200" />
    <figcaption>My caption here,this one is a really long one. Oh boy,so long.</figcaption>
  </figure>

  <figure>
    <img src="http://placehold.it/100x150" />
    <figcaption>My caption here</figcaption>
  </figure>
</div>

CSS：

.gallery {
  display: -webkit-Box;
  display: -moz-Box;
  display: -ms-flexBox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-Box-align: baseline;
  -moz-Box-align: baseline;
}

.gallery figure {
  /* optional */
  -webkit-Box-flex: 1;
  -moz-Box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

/* optional */
.gallery {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

如果您的元素需要换行,那么浏览器支持仅限于Opera,Chrome和IE10. http://caniuse.com/flexbox