Question

我正在创建一个网站，但我遇到了这个问题：我需要一个动态大小的图像（确切地说是25％），右边有一些文本，而右边有一些文本。

我知道可以使用float: right将文字放在图片的右侧，但这样就无法将总是放在图片下面。

这是一个jsfiddle：https://jsfiddle.net/7r51y7d4/2/

由于图像具有动态大小，我不能只添加大量的换行符，因为不仅代码难看，而且在屏幕分辨率不同于我的任何设备上都无法正常工作。 / p>

将图像和右侧文本放在div中将无济于事，因为div只会环绕文本，使图像通过div的边框伸出。

如果需要JavaScript，那么就这样吧，我需要一个不含PHP的解决方案。（但纯HTML / CSS会很好）

Answer 1

您希望div符合clear: both CSS规则，以获取更多信息：https://www.w3schools.com/cssref/pr_class_clear.asp

img {
  float: left;
  margin: 8px;
}

.clear {
  clear: both;
}

<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
  I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
  I want this text to be under the image
</p>

这是小提琴：https://jsfiddle.net/7r51y7d4/4/

Answer 2

只需使用clear:both清除浮动，第二个文字就会出现在图片下方：

img {
  float: left;
  margin: 8px;
}

<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
  I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
  I want this text to be under the image
</p>

Answer 3

您可以使用clear属性指定在浮动元素之后插入文本。

<p style="clear: both;">
    Lorem ipsum
</p>

JSFiddle：https://jsfiddle.net/7r51y7d4/3/

Answer 4

使用CSS定位您的第二段并使用clear:both;

例如：

HTML代码：

<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
  I want this text to be to the right of this image
</p>
<p id="secondParagraph">
  I want this text to be under the image
</p>

CSS代码：

img {
      float: left;
      margin: 8px;
    }

#secondParagraph {
      clear:both;  
    }

我也会用CSS设置25％的宽度。最好使用CSS外部进行所有样式设置，而不是与HTML一致。更易于管理。

如何在图像右侧放置一些文本，在其下放置一些文本

4 个答案: