[分享]css中怎么把图片放在文字下面

在CSS中，我们可以使用以下几种方法让图片放在文字下面。 方法一：使用float属性 我们可以使用float属性将图片浮动到文字的左侧或右侧，并使用clear属性将文字清除浮动。代码如下： pre {...

在CSS中，我们可以使用以下几种方法让图片放在文字下面。 方法一：使用float属性 我们可以使用float属性将图片浮动到文字的左侧或右侧，并使用clear属性将文字清除浮动。代码如下： pre { white-space: pre-wrap; word-wrap: break-word; } p { clear: both; } img { float: left; margin-right: 10px; /* 可调整间距 */ } 方法二：使用display属性 我们可以使用display属性将图片设置为块级元素，并在图片下方添加一段空白的块级元素，来让文字显示在图片下方。代码如下： pre { white-space: pre-wrap; word-wrap: break-word; } p { display: inline-block; } img { display: block; margin-bottom: 10px; /* 可调整间距 */ }

文本内容

方法三：使用position属性 我们可以使用position属性将图片设置为绝对定位，并将文字容器设置为相对定位，让图片与文字容器重叠，从而让文字显示在图片下方。代码如下： pre { white-space: pre-wrap; word-wrap: break-word; } p { position: relative; z-index: 1; } img { position: absolute; bottom: 0; left: 0; /* 可调整位置 */ z-index: 0; } 无论使用哪种方法，都需要注意图片和文字的间距以及相对位置的调整。通过合理运用CSS，我们可以轻松实现让图片放在文字下面的效果。