如何让Div元素并排显示？Grid等布局方法均无效求助

你的Grid布局没生效的核心原因是：Grid容器.grid的直接子元素只有.bg一个，所有其他内容（header、content、footer）都嵌套在.bg里面。Grid布局的规则只对容器的直接子元素生效，所以你给.header、.contentL1-C1这些嵌套元素设置的grid-area完全不起作用，自然没法让两个content div并排。

1. 调整HTML结构 #

把.bg、.header、.contentL1-C1、.contentL1-C2、.footer等元素都直接作为.grid的子元素，取消嵌套关系。这样它们才会成为Grid项，被Grid布局控制。

2. 清理冗余CSS设置 #

去掉.contentL1-C1和.contentL1-C2的width:50%，因为Grid已经通过grid-area为它们分配了对应列的宽度，手动设置宽度会干扰Grid的布局计算。

修改后的完整代码 #

CSS代码

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh; /* 用vh确保body占满视口高度 */
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  height: 100vh; /* 让Grid容器占满视口高度 */
}

.bg {
  background-color: blueviolet;
  grid-area: 1 / 1 / 13 / 5;
  z-index: -1; /* 把背景放在最底层，不遮挡其他内容 */
}

.header {
  margin: 0px;
  padding: 0px;
  background-color: blue;
  grid-area: 1 / 1 / 2 / 5;
}

.footer {
  margin: 0px;
  padding: 0px;
  background-color: black;
  color: white; /* 加个文字颜色，方便看内容 */
  grid-area: 12 / 1 / 13 / 5;
}

.contentL1-C1 {
  margin: 5px;
  padding: 0px;
  background-color: green;
  grid-area: 2 / 1 / 4 / 3;
}

.contentL1-C2 {
  margin: 5px;
  padding: 0px;
  background-color: greenyellow;
  grid-area: 2 / 3 / 4 / 5;
}

HTML代码

<div class="grid">
  <div class="bg"></div>
  <div class="header">
    heyy
  </div>
  <div class="contentL1-C1">
    <img src="congee.png" alt="congee" width="50%" height="50%" />
  </div>
  <div class="contentL1-C2">
    <img src="congee.png" alt="congee" width="50%" height="50%" />
  </div>
  <div class="contentL2">
    <div class="contentL2-title">
      title
    </div>
    <div class="contentL2-C1card">
      <img src="congee.png" alt="congee" width="50%" height="50%" />
    </div>
    <div class="contentL2-C2card">
      <img src="congee.png" alt="congee" width="50%" height="50%" />
    </div>
    <div class="contentL2-C3card">
      <img src="congee.png" alt="congee" width="50%" height="50%" />
    </div>
    <div class="contentL2-C4card">
      card4
    </div>
    hey
  </div>
  <div class="contentL3">
    hey
  </div>
  <div class="footer">
    hey
  </div>
</div>

额外说明 #

• 给.grid和body加上height:100vh，确保布局占满整个视口高度，避免Grid行高无法正常显示。
• 给.bg设置z-index:-1，让它作为背景层，不会遮挡上面的header、content等内容。
• 给.footer加了文字颜色，方便查看内容（可选）。

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