內聯網格元素的垂直對齊

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/