css字在图片右边 |css 按钮 设计

.img-container {
position: relative;
}
.img-container img {
display: block;
max-width: 100%;
height: auto;
}
.img-container p {
position: absolute;
top: 0;
left: 100%;
padding: 0 20px;
font-size: 18px;
}

首先，需要将图片父容器设置为相对定位（position: relative）。然后，对于图片本身，设置为块级元素（display: block），并设置最大宽度（max-width: 100%）和自适应高度（height: auto）。这样可以使图片在不同大小的屏幕上自适应显示。

接着，在图片父容器内部添加一个p标签，位置设置为绝对定位（position: absolute），并且在图片右侧（left: 100%），再通过padding属性实现文字与图片之间的间距。此外，还可以设置字体大小等样式。

使用这种方法，不仅可以方便地在图片右侧添加字，而且还可以实现响应式布局，适应不同大小的屏幕。当然，还有其他的实现方法，可以根据具体需求选择使用。