无论高度如何，如何使两个面板对齐？

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