html - 我不能将两个元素与 display:inline-block 对齐。我该如何解决这个问题？

Question

例如，我有这个代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block_1 {
  display: inline-block;
  width: 50%;
  background: purple;
  height: 100%;
}

.block_2 {
  display: inline-block;
  width: 50%;
  background: pink;
  height: 100%;
}

html, body {
  height: 100%;
}

<div class="block_1"></div>
<div class="block_2"></div>

我的元素仍然表现得像块。为什么？什么可以解释这个问题？

标签： htmlcssheightwidth

Answer 1

删除inline-block并用 . 将它们包装在一个元素中display: flex;。在这种情况下body { display: flex; }

body {
  display: flex;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block_1 {
  width: 50%;
  background: purple;
  height: 100%;
}

.block_2 {
  width: 50%;
  background: pink;
  height: 100%;
}

html, body {
  height: 100%;
}

<div class="block_1"></div>
<div class="block_2"></div>