内联网格元素的垂直对齐

Question

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

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

另请注意。

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

因此，如果使用inline-grid无法实现任务，可能可以使用inline-flex来解决。

对于那些喜欢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 */
}

修订演示

更多信息：

• 如果父母和孩子的身高相同，为什么会出现垂直滚动条？
• 为什么我的textarea比邻居更高？
• 在图象标记下的奥秘白色空间

---

更新 （根据评论）

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

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

修订演示

 .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/