Question

我尝试使用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, auctor diam quis, 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

进行游戏编写的代码

Answer 1

我想要做的是更改图像基线，使标题朝向列的顶部移动。

我的目标 - 弄清楚如何调整图像基线而不更改.container类。这可能吗？

您可以为图像创建一个类，然后使用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

在flexbox布局中设置图像基线

1 个答案: