Question

关于这个问题有很多问题，但没有答案解决了我的问题。

我希望对于小屏幕，某些图像周围没有浮动。所以我有

@media (max-device-width: 639px), (max-width: 639px) {
div.enimage { display: block; clear:both; }
div.enimage img { max-width: 100%; height: auto; border: 0; display: block; clear:both; }
}

这个

<div class="enimage">
<a href="pic/img1.jpg"><img align="left" border="0" height="192" width="264" src="pic/img2.jpg" /></a>
</div>
<p>Some text.</p>

它不起作用，文字仍悬浮在图像右侧！我做错了什么？

Answer 1

请勿使用align属性。它已被弃用了20年。

将float: left添加到图片的CSS规则中，并在要删除时添加float: none。

div.enimage img { 
  float: left;
}

@media (max-device-width: 639px), (max-width: 639px) {
  div.enimage img { 
    float: none;
  }
}

<div class="enimage">
  <a href="pic/img1.jpg"><img height="192" width="264" src="pic/img2.jpg"></a>
</div>
<p>Some text.</p>

Answer 2

使用display：inline-block;而不是display：block;

div.enimage {
    display: inline-block;
    clear: both;
}

当试图使用clear：both时，它不起作用

2 个答案: