无法修改HTML结构时，如何用CSS让蓝色div居红色div右侧？

问题背景 #

现有如下CSS与HTML代码：

.div {
  width: 100%;
  height: 100px;
  background-color: green;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.main {
  background-color: yellow;
}

<div class="main">
  <div>
    <div class="div"></div>
    <div class="div1"></div>
  </div>

  <div class="div2"></div>
</div>

当前渲染效果为：绿色div占满宽度，红色div在其下方，蓝色div在红色div下方。需求是不修改HTML结构，仅通过CSS调整，让蓝色div（.div2）移动至红色div（.div1）的右侧并排显示。

解决方案 #

方法1：使用CSS Grid布局（推荐，灵活自适应） #

通过Grid布局可以精准控制元素的排列位置，适配不同尺寸场景：

.div {
  width: 100%;
  height: 100px;
  background-color: green;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.main {
  background-color: yellow;
  /* 定义网格：2列（第一列自适应，第二列匹配.div2宽度），2行（每行高度对应div的100px） */
  display: grid;
  grid-template-columns: auto 100px;
  grid-template-rows: 100px 100px;
}

/* 让包含绿色和红色div的容器跨占前两行 */
.main > div:first-child {
  grid-row: 1 / span 2;
}

/* 指定蓝色div在第二行第二列，与红色div并排 */
.div2 {
  grid-row: 2;
  grid-column: 2;
}

方法2：使用Flexbox结合绝对定位（适合固定尺寸场景） #

如果元素尺寸固定，可通过相对+绝对定位快速调整位置：

.div {
  width: 100%;
  height: 100px;
  background-color: green;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.main {
  background-color: yellow;
  position: relative; /* 作为绝对定位的参考容器 */
}

/* 将蓝色div定位到红色div的右侧 */
.div2 {
  position: absolute;
  top: 100px; /* 跳过绿色div的高度 */
  left: 100px; /* 对齐红色div的右侧 */
}

方法3：使用浮动布局（传统兼容方案） #

通过浮动调整元素位置，需注意清除浮动避免布局混乱：

.div {
  width: 100%;
  height: 100px;
  background-color: green;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left; /* 让红色div左浮 */
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left; /* 蓝色div左浮，与红色并排 */
}

.main {
  background-color: yellow;
  overflow: hidden; /* 清除浮动，包裹子元素 */
}

/* 给包含绿色div的容器清除浮动，避免影响蓝色div的位置 */
.main > div:first-child {
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Luis Rotoly