[分享]css中如何在图片右边加字

在网页设计中，常常需要在图片旁边添加文字说明，如何实现这个效果呢？

// HTML代码
<div class="pic-text">
    <img src="img/pic.png">
    <p>这是一张漂亮的照片</p>
</div>

// CSS代码
.pic-text {
    position: relative;
    width: 400px;
}

.pic-text img {
    width: 200px;
    float: left;
}

.pic-text p {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    padding: 20px;
} 

首先，在HTML中通过一个div包裹图片和文字，再给图片和文字各自添加一个标签。在CSS中将div设置为relative定位，图片设置为float:left，文字设置为absolute定位，然后通过在文字块上设置背景色和内边距等属性来使文字显示效果更加美观。