图片无法正确靠右对齐求助：前两张正常后两张错位，缩放有异常

问题现象 #

• 前两张图片定位正确，但后两张无法实现靠右对齐
• 缩小浏览器窗口时，图片会挤到同一行且尺寸被压缩

现有代码 #

HTML代码 #

<div class="images-division">
    <img src="./assets/images/coding.jpg" class="image-one">
    <img src="./assets/images/webdev.jpg" class="image-two"/>
    <img src="./assets/images/piano.jpg" class="image-three"/>
    <img src="./assets/images/book.jpg" class="image-four"/>
</div>

CSS代码 #

.image-one {
    width: 50%;
}

.image-two {
    width: 50%;
    float: right;
    height: 389px;
}

.image-three {
    width: 50%;
}

.image-four {
    width: 50%;
    float: right;
}

问题原因 #

1. 浮动布局未清除：image-two的浮动未被清除，导致image-three试图占据其下方剩余空间，无法在新行正常排列
2. 固定高度紊乱布局：image-two设置固定高度，破坏图片自然比例的同时，干扰了后续元素定位
3. 容器无布局约束：父容器未设置明确排列规则，窗口缩小时图片失去排列逻辑挤到一行

修复方案 #

方案一：使用Grid布局（推荐） #

Grid布局简洁稳定，可轻松实现两行两列排列，且自适应窗口大小：

.images-division {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列各占50%宽度 */
}

.images-division img {
    width: 100%;
    height: auto; /* 保持图片原始比例 */
}

• 无需给单个图片设置类，所有图片自动按网格排列
• 窗口缩小时始终保持两行两列布局，不会挤到同一行

方案二：修复浮动布局 #

若需保留浮动写法，需清除浮动并调整样式：

.images-division::after {
    content: "";
    display: table;
    clear: both; /* 清除容器内浮动，避免布局塌陷 */
}

.image-one {
    width: 50%;
}

.image-two {
    width: 50%;
    float: right;
    height: auto; /* 替换固定高度，保留图片比例 */
}

.image-three {
    width: 50%;
    clear: both; /* 清除之前的浮动，确保在新行开始排列 */
}

.image-four {
    width: 50%;
    float: right;
}

• 给父容器添加伪元素清除内部浮动
• 移除image-two的固定高度，避免图片变形
• 给image-three添加clear: both，强制其在新行开始排列

内容的提问来源于stack exchange，提问作者Shourya Kashyap