內聯網格元素的垂直對齊

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/