内联网格元素的垂直对齐

Question

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

第二个示例正常工作（请参阅代码），但第一个示例没有。为什么？我如何修复它，如下面的截图所示？

还要注意。

代替使用display: inline-grid，我们可以使用display: inline-flex + flex-direction: column获得相同的结果。

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

For ones, who prefer jsFiddle

body { 
 
\t width: 500px; 
 
} 
 

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

 
div { 
 
\t 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

---

UPDATE（基于评论）

唯一的问题是，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/