我正在尝试使用flexbox创建一个多列布局,并在所有列中对齐基线.我这样做是使用该align-items: baseline属性.现在,当每列中的第一个元素是文本时,这很有用,例如:
CSS
.container {
display: flex;
align-items: baseline;
}
.col-2 {
width: 48%;
}
HTML
Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis nulla in elit hendrerit congue. Nullam eleifend, neque vitae finibus accumsan, augue dui lacinia leo, eget sagittis ipsum dui id leo.
我遇到的问题是当列中的第一个元素是图像时,如下所示:
Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.
第一列中的标题与第二列中图像的底部对齐.我想要做的是更改图像基线,以便标题将移动到列的顶部.我知道您可以通过将align-items属性设置为来解决此问题flex-start,但我更愿意保留该align-items属性.这样,无论有多少列,文本基线都将始终对齐.
我的目标 - 弄清楚如何在不改变.container课程的情况下调整图像基线.这可能吗？
这里有一个codepen你可以玩弄http://codepen.io/jonathink/pen/wMwgwZ
京公网安备 11010802040832号 | 京ICP备19059560号-6 