HTML如何实现图片左对齐文字右对齐且背景完整适配容器？

核心修改逻辑 #

• 你之前错误将float: left设置在了同时包裹图片和文字的外层div上，该属性会让整个容器左浮动，自然导致文字排在图片下方，应该单独给图片设置左浮动
• 浮动元素会脱离常规文档流，导致父容器高度塌陷，所以你设置的容器背景无法覆盖整个内容区域，需要给父容器增加清除浮动的配置

修改后完整代码 #

<html>
 <head>
   <style>
/* 外层容器负责承载背景，清除内部浮动 */
.item-image {
  background-image: url("bkgd.jpg");
  background-color: #cccccc;
  overflow: auto; /* 核心：清除内部浮动，解决高度塌陷，让背景覆盖整个容器 */
  padding: 10px; /* 可选：增加内边距让布局更美观 */
}
/* 单独给图片设置左浮动，以及和文字的间距 */
.item-image img {
  float: left;
  margin-right: 15px; /* 控制图片和右侧文字的间距，可自行调整数值 */
}

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>

如果不希望使用overflow: auto（部分场景下可能触发不必要的滚动条），也可以给外层容器添加伪元素实现清除浮动，替代overflow: auto配置：

.item-image::after {
  content: "";
  display: table;
  clear: both;
}

修改后图片会左对齐，右侧文字从图片顶部开始排布，图片和文字之间有设定的间距，外层容器的背景会完整覆盖整个内容区域。

内容的提问来源于stack exchange，提问作者Abdias Rivera Bautista