Question

我不理解inline-grid元素的垂直对齐逻辑。

第二个例子工作正常（参见代码），但第一个不是。为什么？我如何解决它，如下面的截图所示？

另请注意。

我们可以使用display: inline-grid + display: inline-flex而不是flex-direction: column，而是使用相同的结果。

因此，如果使用inline-grid无法完成任务，可能可以使用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

更多信息：

更新（基于评论）

唯一的问题是vertical-align: bottom（以及其他问题）垂直对齐的值也影响第二个例子。我实际上是什么想要是根据中间的红线对齐项目。（如图所示我的截图）。我不知道，也许这是不可能的？

是的，这是可能的。这是一个经过修改的网格解决方案：

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规则。

Answer 2

您必须添加vertical-align: bottom;

body {
    width: 500px;
}

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

div {
    border: 1px solid red;
}

这里是JSFIDDLE：https://jsfiddle.net/4sh9oo5k/

内联网格元素的垂直对齐

2 个答案: