防止浮动图像旁边的包装文本“碎片化”答案

【问题标题】：Prevent "fragmentation" of wrapped text next to floated image防止浮动图像旁边的包装文本“碎片化”
【发布时间】：2019-02-19 20:17:49
【问题描述】：

我试图让这个文本在较小的分辨率上不会“碎片化”。这是一个作业，我只能使用 XHTML。

右边的图片是这样浮动的：

#image {
    width:420px;
    margin-left: 2%;
    height:370px;
    position:relative;
    float:right;
}

使用 XHTML：

      <div id="image">
        <a href="http://en.wikipedia.org">
          <img src="picture.png"/>
        </a>
      </div>   

    <p><a href="https://en.wikipedia.org/wiki/Lorem Ipsum">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

显然，这种“碎片化”不会出现在更大的分辨率上。

在 CSS2.1 中是否有一种优雅的方法？

【问题讨论】：

图片是否应该始终位于文本之上，还是应该将图片包裹在更大的屏幕上？
@BryceHowitson 它环绕图像。如果文本位于图像下方，则在此分辨率下显然会更好。
在这种情况下，“在这个分辨率下”是解决它的关键。见下文

标签： css xhtml css-float

【解决方案1】：

由于包装问题取决于分辨率，您可以使用 CSS 媒体查询轻松解决此问题。将这些视为 css 的简单“if/else”。

因此，找出无法接受换行的窗口宽度，并使用该数字创建max-width 规则。这意味着宽度小于您的最大尺寸时，将适用该规则。

现在在这个尺寸下，只需移除浮动并将图像设置为显示块，这会将文本推到页面下方。

@media (max-width: 600px) {
  #image {
    display:block; // make image push text down
    float: none; // remove your float
    margin: 10px auto; // center the image in the available space
  }
}

注意：媒体查询应该位于 CSS 的底部，因此它们会覆盖之前的规则，并且您只需要更改被覆盖的属性。

【讨论】：

需要指出的是@media (max-width: 600px)不在CSS 2.1中

【解决方案2】：

很好的解决方案@BryceHowitson。

我一直在努力解决这个问题，并想出了一个关于你的方法的变体。我将媒体查询放在图像后面的文本段落上。

我的解决方案针对浮动图像后面段落的 clear 属性。当屏幕分辨率在浮动图像旁边留下足够的空间以令人满意地呈现文本时，段落将环绕图像。当可用宽度太低而无法令人满意地呈现文本时，段落会应用“clear:both”，并且段落会向下移动到浮动图像下方。

这种方法的一个“优点”是 CSS 规则应用于我们试图控制其行为的元素。

但是，@BryceHowitson 的解决方案实现了，而我的解决方案没有实现，是在关闭后续文本的换行时图像居中。

CSS

.p-clear {
    @media (min-width: 400px) {
        clear: none;
    }
    @media (max-width: 400px) {
        clear: both;
    }
}

HTML

<img src="..." width="300px">
<p class="p-clear">text that needs at least 100px width</p>

【讨论】：