Question

似乎display: inline-block非常不受欢迎，人们倾向于使用float，也许这就是为什么我找不到有用的答案来解决我的问题。

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

我真的不喜欢float，因为clear:both我必须追加，我也不确定如何使用float。用我的知识测试它并没有得到任何更好的结果。

任何人都知道如何修复此问题而不在#b2和#b3周围添加包装器？不幸的是，HTML标记无法更改。

提前感谢您，祝您度过愉快的一天。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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- *元素都不能跨越两行或更多行，因为这些元素是由内联格式规则排列的，在单行中有足够的水平空间，之后行换行和新行开始。只有浮点数可以跨越几行文本。另一种选择是使用带有flex-flow: column wrap的Flexbox布局，但这需要为容器设置显式高度。

display：inline-block强制换行

1 个答案: