html - 将非文本元素包裹在一个 float 周围

Question

我有一个流式布局，它已经为我工作了一段时间。我漂浮 <div>不是右就是左。一个 div 通常会有一个图像和一个标题。

文本项正确地环绕在 float 周围。但是某些元素没有:<table> <hr>将做以下两件事之一:他们要么侵入 float 的 div，要么跳到 float 的 div 下面。

有没有一种方法只使用 css 以便像 <hr> 这样的元素将大小调整为当前可用的宽度，就像文本实体一样？也就是说，如果文本当前环绕 40% 宽度的 float ，并且有一个 <hr>宽度为 80%，则 <hr>将完成剩余 60% 的 80%，并在环绕文本中放置 48% 的宽度 hr。

Answer 1

问题是，当您在 width 中使用百分比时属性(property)，

The percentage is calculated with respect to the width of the generated box's containing block.

如果你想计算 float 元素剩余可用空间的百分比，你必须将你的元素包裹在一个占据剩余空间的包含 block 中。

#wrapper {
  overflow: hidden; /* Clear float */
}
#float {
  float: left;
  width: 40%;
  background: #f99;
}
#block { /* Containing block that fills remaing space */
  overflow: hidden;
  background: #99f;
}
hr {
  width: 80%; /* With respect to available space */
}

<div id="wrapper">
  <div id="float">Float</div>
  <div id="block">
    <hr />
  </div>
</div>