Question

我的<figure><img>结构设置为float: right，max-width: 50%。所以带有图像的图形漂浮在右侧，就像我想要的那样。后续段落将其文本包装在页面的左半部分，不会流入浮动图形。

但是如果我添加一个带有背景颜色和漂亮边框的<aside>，<aside>元素将呈现在浮动图形的顶部。经过进一步调查，我发现<p>标签也延伸到浮动图中 - 只是它的文字在它之前包裹着。因此，如果我在段落上放置边框，它也会渲染浮动图形。我想我已经忘记了CSS。

所以我可以浮动<aside>，但随后大小会收缩 - 环绕文本（比页面的一半小得多）。或者我可以给<aside>一个display: inline-block，但同样的事情会发生。

如何使块元素尽可能宽地扩展其宽度，而不是使其在浮动元素上呈现？以这种方式思考：一个段落将其文本包裹在浮动图形的边缘。我怎么能让<aside>的宽度等于一个段落在浮动图形存在时所包裹的宽度？

这是一个明确的例子。水平调整页面大小，直到文本换行。

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <title>aside float overlap</title>
  </head>
  <body>
    <figure style="float: right"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Horses" />
    <figcaption>Horses from (<a href="https://commons.wikimedia.org/wiki/File:Nokota_Horses_cropped.jpg"><cite>Wikimedia Commons</cite></a>)</figcaption></figure>
    <p>The figure shows some horses. You'll notice that this paragraph wraps right at the edge of the image, and then goes to the next line.</p>
    <aside style="border: 0.1em solid">This is an aside. I want the border to stop at the floated figure, just like the text will wrap at the floated figure.</aside>
  </body>
</html>

有another question与我的相似 - 但那里的回答并不能解决我的问题。

所以让我这样问：理解盒子占据整个宽度，即使它包含的文本在遇到浮动块时可能会换行，是否有任何方法可以定义只出现的边框和/或背景在包装文本周围，而不是流入浮动块？

Answer 1

我相信你正在采用这样的解决方案，其中浮动元素（figure）不会干扰旁边部分，让它在剩余空间中具有完整的边界。为此，您可以将所有这些内容放在具有overflow: hidden的父元素中。此外，一边部分应该overflow: hidden不要混淆浮动元素。

＆＃13;

.parent{
  overflow: hidden;
}
figure{
  float: right;
  max-width: 50%;
  margin: 5px;
}
.side{
  overflow: hidden;
}
.side aside{
  border: 0.1em solid;
}

＆＃13;

<div class="parent">
  <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg">
    <figcaption>Horses from (<a href="https://commons.wikimedia.org/wiki/File:Nokota_Horses_cropped.jpg"> <cite>Wikimedia Commons</cite></a>)
    </figcaption>
  </figure>
  <div class="side">
    <p>The figure shows some horses. You'll notice that this paragraph wraps right at the edge of the image, and then goes to the next line.</p>
    <aside>This is an aside. I want the border to stop at the floated figure, just like the text will wrap at the floated figure.</aside>
  </div>
</div>

＆＃13;

将CSS元素宽度限制为浮动元素

1 个答案: