無論高度如何，如何使兩個面板對齊？

Question

我有兩個面板：

它們完美對齊。 現在，讓我們說我在面板1中添加文本來改變它的高度。

它不再對齊：

我不確定如何解決這個或為什么會發生這種情況。 無論我添加哪些面板，我如何保持兩個面板對齊？

我創建了一個JSFiddle以便於編輯： https ：//jsfiddle.net/8qafwy93/7/

HTML：

<div class="row">
  <div class="panel">
    <h1>Panel 1</h1>
    <p>Remove this</p>
  </div>

  <div class="panel">
    <h1>Panel 2</h1>
  </div>
</div>

CSS：

body{
  background: slategray;
}

.row{
  margin-left: auto;
  margin-right: auto;
}

.panel{
  background: white;
  width: 49%;
  display: inline-block;
}

Answer 1

您可以使用flexboxes

你添加：

.row{
  display: flex;
  justify-content: space-between;
}

這會將你的roll div變成一個flex contianer，並且通過justify-content你可以在元素之間添加一些空格;

如果你想了解更多關於我推薦的flexboxes的信息

MDN CSS技巧

希望這可以幫助 ：）

 body{ background: slategray; } .row{ display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; } .panel{ background: white; width: 49%; display: inline-block; } 

 <div class="row"> <div class="panel"> <h1>Panel 1</h1> <p>Remove this</p> </div> <div class="panel"> <h1>Panel 2</h1> </div> </div> 

Answer 2

由於您使用內聯塊來水平對齊元素，因此您可以將以下代碼添加到面板規則中：

vertical-align: middle;

vertical-align屬性允許您在內聯格式化上下文中指定內聯的垂直對齊方式。

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align