Question

我的液体布局对我来说已经有一段时间了。我向右或向左浮动<div>。 div通常会有一个图像和一个标题。

文本项目正好包裹在浮点数周围。但是某些项目不会：<table> <hr>会执行以下两种操作之一：它们会侵入浮动的div，或者它们会跳到浮动的div下面。

是否有一种方法只使用css，以便像<hr>这样的项目大小为当前可用的宽度，就像文本实体一样？也就是说，如果文本当前环绕40％宽度的浮动，并且<hr>宽度为80％，则<hr>将占剩余60％的80％，并放置包装文本中48％宽度小时。

Answer 1

问题在于，当您在width属性中使用百分比时，

百分比是根据宽度计算的生成的框containing block。

如果要计算浮动元素剩余可用空间的百分比，则必须将元素包装在占用剩余空间的包含块内。

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

在浮点数周围包装非文本元素

1 个答案: