我一直在寻找如何使这个布局工作,我需要一些帮助
我只是希望我的图像与最高图像的基线,每行以及该行下方的标题对齐.我看到你在使用图像和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