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

这是演示：

而这个想法：

>对子图使用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%;

}