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