移动div不挤压其他div？div6占空白且不移动div7的布局问题

嘿，这个布局问题我太熟悉了！你遇到的核心问题是浮动布局的局限性——浮动元素依赖文档流排列，一旦调整div6的尺寸，它就会挤占后续浮动元素的空间，导致div7被挤到下方。要解决这个问题，推荐你用CSS Grid来实现，它能精准控制每个元素的位置，完全避免浮动带来的流问题。

问题根源分析 #

你之前用float来布局，div6和div7应该是处于同一行的浮动元素。当div6的宽度或高度变化时，它会打破浮动流的平衡，导致div7因为空间不足而被挤到下一行。浮动本来就不是为这种复杂的多区域布局设计的，Grid才是更合适的工具。

解决方案：用CSS Grid重构布局 #

下面是针对你的需求的完整代码示例，我会保留你原有的元素样式，用Grid来实现div6占据div4、div5和div7旁的空白，且div7固定位置不会被挤下移：

首先，给所有元素的父容器（比如#container）设置Grid布局，然后明确每个元素的网格区域：

<div id="container">
  <div id="test1">test1</div>
  <div id="test2">test2</div>
  <div id="test3">test3</div>
  <div id="test4">test4</div>
  <div id="test5">test5</div>
  <div id="test6">test6</div>
  <div id="test7">test7</div>
</div>

#container {
  display: grid;
  /* 定义列：左列15%（对应test1、test4、test5），右列占剩余所有空间 */
  grid-template-columns: 15% 1fr;
  /* 定义行：自动高度，适配内容 */
  grid-template-rows: auto auto auto auto auto;
  /* 明确每个元素的网格区域位置 */
  grid-template-areas:
    "test1 test2"
    "test3 test3"
    "test4 test6"
    "test5 test6"
    ". test7";
  /* 可选：如果需要元素之间的间距，添加gap */
  /* gap: 10px; */
  height: 100vh; /* 可选：让容器占满视口高度，方便测试 */
}

#test1 {
  grid-area: test1;
  background-color: red;
}

#test2 {
  grid-area: test2;
  background-color: green;
}

#test3 {
  grid-area: test3;
  background-color: blue;
  height: 25%;
}

#test4 {
  grid-area: test4;
  background-color: orange;
  height: 20%;
}

#test5 {
  grid-area: test5;
  background-color: #800080; /* 给test5加个颜色，方便区分 */
  height: 20%;
}

#test6 {
  grid-area: test6;
  background-color: #ffff00; /* 黄色，方便识别div6 */
  /* test6会自动占据test4和test5旁边的所有空白区域 */
}

#test7 {
  grid-area: test7;
  background-color: #008000; /* 深绿色，区分test2 */
  /* test7固定在右列的最后一行，不管test6怎么调整都不会被挤下移 */
}

关键说明 #

• Grid区域划分：通过grid-template-areas，我们把test1和test2放在第一行，test3跨两列占第二行，test4和test5在左列的第三、四行，test6跨右列的第三、四行（占据div4、div5旁边的空白），test7固定在右列的第五行。
• 互不干扰的布局：每个元素都在独立的网格单元格里，调整test6的尺寸（比如放大宽度或高度）只会影响它自己所在的单元格，完全不会波及test7的位置。
• 替代方案：Flexbox嵌套：如果你的浏览器兼容性要求较高（比如支持IE11），也可以用Flexbox嵌套布局，不过Grid的代码会更简洁直观。比如左列用一个Flex容器垂直排列test4、test5，右列用另一个Flex容器垂直排列test6、test7，这样test6和test7也不会互相影响。

这样调整后，你就能完全实现需求啦！

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