固定HTML结构下如何将Flex左侧元素定位到顶部实现目标布局

数据老陈

2026-8-28

布局实现方案

需求与约束

需要实现的布局效果：

蓝色方块置于顶部，与红色方块并排显示
黄色方块位于蓝色方块正下方
必须满足的限制：
不能修改现有HTML结构
方块高度为动态值，禁止给蓝色方块设置margin-top调整位置

问题原因

原有代码给所有方块设置了左浮动，浏览器会按照DOM书写顺序排布浮动元素：前两个60%宽度的红色、绿色方块会优先占满左侧整列，排在后面的30%宽度蓝色方块只能被挤到绿色方块下方，无法和顶部红色对齐。

修复代码

仅调整CSS即可实现效果，无需改动HTML结构：

.wrapper {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  /* 启用Grid布局 */
  display: grid;
  /* 定义两列宽度，匹配原设计60%、30%的宽度要求 */
  grid-template-columns: 60% 30%;
  /* 两列之间预留间距，可根据实际需求调整数值 */
  column-gap: 4%;
}

.item {
  /* 移除原代码的float: left属性，Grid子项不需要浮动 */
  padding: 0 8px;
  box-sizing: border-box;
  /* 让方块宽度撑满归属的网格列 */
  width: 100%;
}

.item1 {
  /* 红色方块归属第一列 */
  grid-column: 1;
  height: 400px;
  background-color: red;
}

.item2 {
  /* 绿色方块归属第一列，自动排在红色下方 */
  grid-column: 1;
  height: 100px;
  background-color: green;
}

.item3 {
  /* 蓝色方块归属第二列 */
  grid-column: 2;
  height: 200px;
  background-color: blue;
}

.item4 {
  /* 黄色方块归属第二列，自动排在蓝色下方 */
  grid-column: 2;
  height: 500px;
  background-color: yellow;
}