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

Question

我试图让这个文本在较小的分辨率上不“碎片化”。这是一项任务，我只能使用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中有一种优雅的方法吗？

Answer 1

由于包装问题取决于分辨率，因此您可以使用CSS Media Queries轻松解决此问题。将这些视为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的BOTTOM，因此它们会覆盖以前的规则，您只需要更改被覆盖的属性。

Answer 2

很好的解决方案@BryceHowitson。

我刚刚一直在努力解决这个问题，并提出了一个变种方法。我将Media查询放在图像后面的文本段落上。

我的解决方案针对浮动图像后面的段落上的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>