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的底部，因此它们会覆盖之前的规则，并且您只需要更改被覆盖的属性即可。

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>

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

2 个答案: