html - 行内网格元素的垂直对齐

Question

我不明白inline-grid元素垂直对齐的逻辑。

第二个例子工作正常(见代码)，但第一个不是。为什么？以及如何修复它，如下面的屏幕截图所示？

Also note.

Instead of using display: inline-grid, we can use display: inline-flex + flex-direction: column with the same result.

Thus, if the task could not be achieved with inline-grid, probably it could be solved using inline-flex.

For ones, who prefer jsFiddle

body {
	width: 500px;
}

.inline-grid {
	display: inline-grid;
	width: 49%;
}

div {
	border: 1px solid red;
}

<h3>not ok</h3>

<div class="inline-grid">
<div><img src="http://i.imgur.com/joY41yV.png"></div>
<div>Lorem ipsum</div>
</div>

<div class="inline-grid">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>Lorem ipsum</div>
</div>

<hr>

<h3>ok</h3>

<div class="inline-grid">
<div><img src="http://i.imgur.com/joY41yV.png"></div>
<div>Lorem ipsum</div>
</div>

<div class="inline-grid">
<div><img src="http://i.imgur.com/joY41yV.png"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Answer 1

vertical-align属性适用于行内级和表格单元格元素。默认值为 baseline。因为您使用的是 display: inline-grid，所以此规则会影响您的代码。

用 vertical-align: bottom 覆盖默认值。

.inline-grid {
  display: inline-grid;
  width: 49%;
  vertical-align: bottom; /* new */
}

revised demo

更多信息:

• Why is there a vertical scroll bar if parent and child have the same height?
• Why is my textarea higher up than its neighbor?
• Mystery white space underneath image tag

---

更新(基于评论)

The only problem, is that vertical-align: bottom (as well as other values of vertical align) also affects second example. What I actually want is to align items according to the middle red line. (As shown in my screenshot). I don't know, maybe it just impossible?

是的，这是可能的。这是修改后的网格解决方案:

revised demo

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-gap: 5px;
}

div > div { border: 1px solid red; }
img       { vertical-align: bottom; }
body      { width: 500px; }

<div class="grid">
  <div><img src="http://i.imgur.com/joY41yV.png"></div>
  <div>Lorem ipsum</div>
  <div style="align-self: end;"><code>align-self: end</code> || Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div>Lorem ipsum</div>
</div>

<hr>

<div class="grid">
  <div><img src="http://i.imgur.com/joY41yV.png"></div>
  <div style="align-self: start"><code>align-self: start</code></div>
  <div><img src="http://i.imgur.com/joY41yV.png"></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

注意:考虑移除图像周围的 div 包装器。它们可能不是必需的。我只将它们留在我的答案中，因为它们是正确呈现(演示？)边框所必需的。移除这些包装后，您还可以摆脱 CSS 中的 vertical-align 规则。