html – 在flexbox布局中设置图像基线

概述我正在尝试使用flexbox创建一个多列布局,并在所有列中对齐基线.我使用align-items：baseline属性执行此 *** 作.现在,当每列中的第一个元素是文本时,这很有用,例如： CSS .container { display: flex; align-items: baseline; }.col-2 { width: 48%;} HTML <div class='con 我正在尝试使用flexBox创建一个多列布局,并在所有列中对齐基线.我使用align-items：baseline属性执行此 *** 作.现在,当每列中的第一个元素是文本时,这很有用,例如：

CSS

.container {  display: flex;  align-items: baseline; }.col-2 {  wIDth: 48%;}

HTML

<div class='container'>   <div class='col-2'>    <h2>Nullam eget metus suscipit,auctor diam quis,sagittis eros. Phasellus quis iaculis nisi.</h2>  </div>  <div class='col-2'>    <p>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.</p>  </div></div>

我遇到的问题是当列中的第一个元素是图像时,如下所示：

<div class='container'>   <div class='col-2'>    <h2>Nullam eget metus suscipit,sagittis eros. Phasellus quis iaculis nisi.</h2>  </div>  <div class='col-2'>    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>  </div></div>

第一列中的标题与第二列中图像的底部对齐.我想要做的是更改图像基线,以便标题将移动到列的顶部.我知道您可以通过将align-items属性设置为flex-start来解决此问题,但我更愿意保留align-items属性.这样,无论有多少列,文本基线都将始终对齐.

我的目标 – 弄清楚如何在不改变.container类的情况下调整图像基线.这可能吗？

这是一个可以玩http://codepen.io/jonathink/pen/wMwgwZ的编码器

解决方法

What I would like to do is change the image baseline so that the heading will move towards the top of the column.

My goal – figure out how to adjust the image baseline without changing the .container class. Is this possible?

您可以为图像创建一个类,然后使用align-self属性仅调整图像的对齐方式.

从你的codepen：

修改HTML(在两个地方添加.Image类)

<div class='container'>  <div class='col-2'>    <h2>Nullam eget metus suscipit...</h2>  </div>  <div class='col-2'>    <p>Lorem ipsum dolor sit amet,cons...</p>  </div></div><div class='container'>  <div class='col-2'>    <h2>Nullam eget metus suscipit...</h2>  </div>  <div class='col-2 image'><!-- ADJUSTMENT HERE -->    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>  </div></div><div class='container'>  <div class='col-3'>    <h2>Nullam eget metus suscipit...</h2>  </div>  <div class='col-3'>    <p>Lorem ipsum dolor sit amet...</p>  </div>  <div class='col-3 image'><!-- ADJUSTMENT HERE -->    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>  </div></div>

修改后的CSS(添加了一条规则)

.image { align-self: flex-end; }

Revised DEMO

总结

以上是内存溢出为你收集整理的html – 在flexbox布局中设置图像基线全部内容，希望文章能够帮你解决html – 在flexbox布局中设置图像基线所遇到的程序开发问题。

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