求助：CSS布局问题——如何将图片置于文本框左侧？

核心问题分析 #

当前布局异常的根源有三点：

1. 图片设置了float: right，默认向容器右侧浮动，不符合靠左放置的需求；
2. 文本框使用固定height: 200px，若图片高度加内边距超过容器高度，图片会被挤出容器底部；
3. 文本框的padding-right: 250px是为右侧浮动图片预留空间，方向不匹配反而浪费布局空间。

方案一：浮动布局（推荐，自适应高度） #

这种方式符合流式布局逻辑，容器高度会随内容自动调整。

1. 修改图片标签样式：

<img src="husitsmotors.png" alt="Husqvarna FC 450 Dzinējs" style="float: left; width: 200px; margin-right: 20px;">

• 将float: right改为float: left，让图片靠左浮动；
• 添加margin-right: 20px，避免文本与图片紧贴。

2. 调整文本框CSS：

.dzinejs {
    background-color: white;
    color: black;
    margin-right: 100px;
    margin-left: 50px;
    min-height: 200px; /* 替换固定height为min-height，保留最小高度同时支持自适应 */
    width: 90%;
    font-size: 10px;
    font-family: Arial;
    font-style: normal;
    padding-top: 2rem;
    padding-left: 20px;
    /* 移除padding-right: 250px，无需为右侧预留空间 */
    overflow: hidden; /* 清除浮动，确保容器包裹图片和文本 */
}

方案二：绝对定位（适合固定容器高度的场景） #

如果必须保留height: 200px，可通过绝对定位实现图片靠左：

1. 修改图片标签样式：

<img src="husitsmotors.png" alt="Husqvarna FC 450 Dzinējs" style="position: absolute; left: 20px; top: 2rem; width: 200px;">

2. 调整文本框CSS：

.dzinejs {
    position: relative; /* 开启相对定位，让图片绝对定位基于当前容器 */
    background-color: white;
    color: black;
    margin-right: 100px;
    margin-left: 50px;
    height: 200px;
    width: 90%;
    font-size: 10px;
    font-family: Arial;
    font-style: normal;
    padding-top: 2rem;
    padding-left: 220px; /* 图片宽度200px + 20px间距，避免文本被遮挡 */
    /* 按需保留或移除padding-right: 250px */
}

内容的提问来源于stack exchange，提问作者Ingus Jostmanis