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

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 Tricks

希望这会有所帮助：）

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