在编写文章时,有时需要在图片的左右两侧添加文字,这时可以使用CSS来实现。
首先,在HTML中使用p标签来包裹每段文字,并使用img标签来插入图片。然后,使用CSS中的float属性来控制文字和图片的位置。
例如,如下所示的HTML代码:
<div class="image-text">
<img src="example.jpg">
<p>这里是图片左侧的文字。</p>
<p>这里是图片右侧的文字。</p>
</div>
其中,class为“image-text”的div元素用于包裹图片和文字,p元素用于显示文字,img元素用于插入图片。
接下来,在CSS中,使用如下的样式来实现文字和图片的对齐:
.image-text img {
float: left;
margin-right: 20px;
}
.image-text p {
margin-top: 0;
}
其中,使用了float属性来将图片向左浮动,同时设定了一个20像素的右边距,以便与左侧的文字分隔开来。同时,为了避免文字和图片之间出现奇怪的空隙,使用了margin-top: 0来去除段落与上方的默认间距。
使用上述代码后,就可以达到在图片左右两侧添加文字的效果。需要注意的是,如果图片和文字过宽,可能会导致在某些设备上出现排版问题,此时可以通过调整间距或使用@media查询等方式进行优化。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。