html - 显示 : inline-block forces new line

Question

似乎 display: inline-block 很不受欢迎，人们倾向于使用 float 代替，也许这就是我找不到有用答案的原因我的问题。

给定以下代码段，有 3 个框。 #b1 与 #b2 和 #b3 的高度相同。是否可以直接在 #b2 下显示 #b3 而不是换行？

我不太喜欢 float 因为 clear:both 我必须追加而且我不确定如何使用 float要么。根据我的知识对其进行了测试，但没有得到更好的结果。

有没有人知道如何解决这个问题而不在 #b2 和 #b3 周围添加包装器？遗憾的是，无法更改 HTML 标记。

提前谢谢你，祝你有美好的一天。

#wrapper {
  width: 100%;
  font-size: 0;
}
.block {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.block > p {
  font-size: 1rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.block_50x100 {
  width: 50%;
  padding-top: 100%;
  background: #0f0;
}
.block_50x50 {
  width: 50%;
  padding-top: 50%;
  background: #00f;
}
.block_50x50+.block_50x50 {
  background: #f00;
}

<div id="wrapper">
  <div id="b1" class="block block_50x100">
    <p>some content</p>
  </div>
  <div id="b2" class="block block_50x50">
    <p>some content</p>
  </div>
  <div id="b3" class="block block_50x50">
    <p>some content</p>
  </div>
</div>

Answer 1

在我看来，花车更适合这种情况。

#wrapper {
  width: 100%;
  overflow: hidden; /* more reliable way to contain floats
                       by creating the isolated Block Formatting Context (BFC)
                       more on this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context */
}
.block {
  display: block;
  overflow: hidden; /* new BFC again, now to preven overlapping of regular and floating blocks */
}
.block_50x100 {
  width: 50%;
  padding-top: 100%;
  background: #0f0;
  float: left;
}
.block_50x50 {
  width: 50%;
  padding-top: 50%;
  background: #00f;
}
.block_50x50+.block_50x50 {
  background: #f00;
}

<div id="wrapper">
  <div id="b1" class="block block_50x100">
  </div>
  <div id="b2" class="block block_50x50">
  </div>
  <div id="b3" class="block block_50x50">
  </div>
</div>

任何 inline-* 元素都不能跨越两行或更多行，因为此类元素是按照内联格式规则布局的，在单行中同时有足够的水平空间，之后换行并换行开始。只有 float 可以跨越多行文本。另一种选择是使用带有 flex-flow: column wrap 的 Flexbox 布局，但这需要为容器设置显式高度。