这是一个minimal working example on JSFiddle
目标：我正在尝试实现一种在印刷媒体中常见的布局;每个.subfigure由其唯一的< img>的基线垂直对齐.元素,虽然它自己的.subfigcaption可以运行,只要它需要而不影响< img>的相对位置.在每个子图中.
但是,使用我当前的布局代码,我只能将每个.subfigure作为一个整体进行相对对齐：< img>和.subfigcaption被视为聚合块.结果是,如可以看到的那样,in my working example,长子标题会破坏子图之间的图像对准.
我真的很想找到一个CSS解决方案,它不需要我改变语义相关的HTML.我考虑过使用表格布局格式,但是我没有看到如何正确地放置表格行,因为我的html目前已经组织好了.此外,此样式将应用于大量内容,因此我无法手动调整每个特定的数字.
注意：做图>图{vertical-align：top;}对于这个例子看起来没问题,但不是我想要的.目标是模仿打印惯例,我们在图像的底部对齐,而不是顶部.实际上,更精确的目标是让所有.subfigcaptions从共同的基线开始,而不管图像的相对大小.
目前的布局
期望的布局
解决方法
http://jsfiddle.net/salman/LzUaC/29/
而这个想法：
>对子图使用display：inline-block,以便：
>他们侧身堆叠
>他们的基线一致
>放置宽度为100％的图像;身高：自动;在子数字内
>可选择设置vertical-align：bottom;删除底部的几个像素
>用浮点放置字幕：左;在子数字内,以便：
>它们离开流动并且不影响子图的高度
>设定宽度：100％;使它们在子图中一直伸展
>使用clear：两个都在最后一个数字标题上(我认为你应该没有任何效果)
CSS：
figure {
margin: 1em 0;
text-align: center;
background-color: #CCC;
}
figure > figure {
display: inline-block;
background-color: #AAA;
}
figure > figure > img {
width: 100%;
height: auto;
vertical-align: bottom;
}
figure > figure > figcaption {
float: left;
width: 100%;
background-color: #999;
}
figure > figure + figcaption {
clear: both;
background-color: #666;
}
/*
* for testing
*/
figure > figure:nth-child(1) {
width: 31%;
}
figure > figure:nth-child(2) {
width: 31%;
}
figure > figure:nth-child(3) {
width: 25%;
}
