html – 通过子元素对齐两个DIV

概述我目前正试图找出一种用CSS来布局语义定义的多图像图形的方法,每个图像可能都有自己的子图像.这种图形的语义是外部的< figure> div包含多个< figure class = subfigure> div的.每个.subfigure div包含一个< img>然后是< figcaption class = subfigcaption>. 这是一个minimal working example 我目前正试图找出一种用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,长子标题会破坏子图之间的图像对准.

我真的很想找到一个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%;}

总结

以上是内存溢出为你收集整理的html – 通过子元素对齐两个DIV全部内容，希望文章能够帮你解决html – 通过子元素对齐两个DIV所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。