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

前端之家收集整理的这篇文章主要介绍了jquery – 将多个图像(带字幕)对齐到基线,所有不同的高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在寻找如何使这个布局工作,我需要一些帮助

我只是希望我的图像与最高图像的基线,每行以及该行下方的标题对齐.我看到你在使用图像和jquery构建布局方面有很多经验.如果你能指出我正确的方向,我想我可以解决它.

这是我所拥有的jsfiddle,但我认为我可能不得不抛弃砖石,因为我的客户只是想要一个不错的基线..但是当然有一个响应包装..
http://jsfiddle.net/perrodeagua/SeXDu/embedded/result/

这是我目前的CSS,但我并没有和它结婚

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

这里是我需要的模型
http://postimg.org/image/sygkducs5/

谢谢!

解决方法

如果你的字幕也都是不均匀的长度,那么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

原文链接:https://www.f2er.com/jquery/180657.html

猜你在找的jQuery相关文章