如何在包含背景的 html 中将图像左对齐和文本右对齐？答案

【问题标题】：How do i Align image to left and text right with background included html?如何在包含背景的 html 中将图像左对齐和文本右对齐？
【发布时间】：2021-12-10 14:19:19
【问题描述】：

我正在尝试将图像向左对齐并将文本放在右侧，我已经尝试过

float:left

所以我设法对齐它，但右边的文字从照片的底部开始，我希望它从照片的开头开始，留下一些边距

同样在图片和文字的div中，我为图片和文字添加了背景，但它只跟随文字的长度。

我如何在包含背景的 html 中将图像左对齐和文本右对齐？

有人可以帮我解决这个问题。

<html>
 <head>
   <style>

.item-image {
  background-image: url("bkgd.jpg");
  background-color: #cccccc;
  float:left;
}

body {background-color: powderblue;}
h1   {color: blue;}
b    {color: red;}
</style> 
 </head>
 <body>

    <div class="item item-image">
<img src="<?= $_POST['imghide']; ?>" />Texto a la derecha alineado Texto a la derecha alineado Texto a la derecha alineado Texto a la derecha alineado Texto a la derecha alineado 
     </div>
<br clear="all">
</body>
</html>

图片

【问题讨论】：

标签： php html css styles

【解决方案1】：

您应该在图像本身上使用它，而不是在 .item-image 上使用 float: left。边距将作用于图像，

img{
  width: 50%;
  float: left;
  margin: 20px;
}

另外，为了增加背景尺寸，像这样在背景中添加填充：

.item-image{
  padding: 10px;
}

这将在.item-image 的子元素周围增加空间，而不会增加它们的大小。

【讨论】：