将多个图像（带字幕）与基线对齐，所有高度均不同

我一直在寻找如何使这个布局工作，我需要一些帮助

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

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

这是我目前的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/

谢谢！

Answer 1

如果你的字幕也都是不均匀的长度，那么Flexbox是你最好的纯CSS选项。

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

 
 
  
My caption here, this one is a really long one. Oh boy, so long.
 
 
  
My caption here
 
  

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

Answer 2

你的意思是，像这样？ http://jsfiddle.net/LeBen/yFEc6/

实际上在Chrome，Safari和Firefox中进行了测试，默认情况下使用

将图像与基线对齐。

Answer 3

编辑 –如果你可以使用HTML5，Le Ben的答案比我的更酷，但如果你需要支持IE 8，这应该工作

如果您的图像对齐如下：

 ---- ---- ---- | | | | | | ---- | | ---- ---- 

你想要他们这样：

  ---- ---- | | ---- | | | | | | ---- ---- ---- 

只需使用一些CSS：

  
  
Fig 1
 
 
  
Fig 2
 
 
  
Fig 3
  

http://jsfiddle.net/YTaVr/