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