Question

我目前正试图找出一种用CSS来布局语义定义的多图像图形的方法，每个图像可能都有自己的子图像。这种图形的语义是包含多个<figure> div的外部<figure class=subfigure> div。每个.subfigure div只包含一个<img>，后跟<figcaption class=subfigcaption>。

这是minimal working example on JSFiddle

目标： 我正在尝试实现一种在印刷媒体中常见的布局;每个.subfigure由其唯一<img>元素的基线垂直对齐，而其自己的.subfigcaption只要需要就可以运行，而不会影响相对位置每个子图中的<img>。

但是，使用我当前的布局代码，我只能将每个.subfigure作为一个整体进行相对对齐：<img>和.subfigcaption被视为聚合块。结果是，in my working example可以看出，长子标题会破坏子图之间的图像对齐。

我真的很想找到一个不需要我改变语义相关HTML的CSS解决方案。我考虑过使用表格布局格式，但是我没有看到如何正确地放置表格行，因为我的html目前已经组织好了。此外，这种风格将应用于大量内容，因此我无法手动调整每个具体数字。

注意：做figure>figure {vertical-align: top;}看起来不错，但这不是我想要的。目标是模仿打印惯例，我们在图像的底部对齐，而不是顶部。实际上，无论图像的相对大小如何，更准确的目标是让所有.subfigcaptions始于共同基线。

当前布局

所需的布局

Answer 1

呃，我错过了什么，或者只是移除vertical-align: middle给你想要的结果：

http://jsfiddle.net/LzUaC/9/

enter image description here

Answer 2

以下是演示：

<强> http://jsfiddle.net/salman/LzUaC/29/

这个想法：

对子图使用display: inline-block，以便：
- 他们侧身堆叠
- 他们的基线对齐
将带有width: 100%; height: auto;的图像放在子图中
- 可选择设置vertical-align: bottom;以删除底部的几个像素
在子图中放置带有float: left;的字幕，以便：
- 他们离开了流程并且不影响子图的高度
- 设置width: 100%;以使它们一直延伸到子图
在最后一个数字标题上使用clear: both（我认为你应该没有任何效果）

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%;
}

Answer 3

我知道这可能会吓到你，但是给它一个机会:-P你总是可以用divs contenting display：table和table-cell来替换表。

这是我想到实现这种效果的唯一方法。

http://jsfiddle.net/LzUaC/5/

CSS

.fig-img{width:40%; text-align:center; vertical-align:bottom;}
.fig-img img{width:100%;}

.fig-caption{vertical-align:top;}

.fig-summary{text-align:center; padding-top:40px;}

Answer 4

删除

figure>figure {
  vertical-align : middle;
}
figure>figcaption {
    display : -webkit-box;
    display : -moz-box;
    display : -ms-flexbox;
    display : -webkit-flex;
    display : flex;
}

并添加

figure>figure>figcaption {
    vertical-align : top;   
           display : inline-block; 
}
figure>figcaption {
    text-align : center;
}

魔术： running demo

不使用flex，并且无处不在... 除了IE中的（多么令人惊讶......）

通过子元素对齐两个DIV

4 个答案: