CSS新手求助：如何实现四个div盒子的水平对齐？

嘿，我来帮你搞定这个盒子重叠的难题！你现在遇到的问题主要有两个原因：

• 你把盒子的CSS选择器写成了嵌套结构（比如#box-grey #box-orange），这会让橙色盒子变成灰色盒子的子元素，自然就重叠在父元素内部了
• div默认是块级元素，会独占一行，不设置布局的话，它们要么上下堆叠，要么像子元素那样重叠

下面给你两种简单可行的解决方案，优先推荐第一种现代布局方式：

方案一：使用Flexbox（最推荐，简单易维护） #

Flexbox是现在前端布局的首选方案，能轻松实现水平/垂直对齐，还能灵活处理间距。

第一步：修正HTML结构 #

把四个盒子写成独立的div元素，不要嵌套：

<div id="box-grey"></div>
<div id="box-orange"></div>
<div id="box-blue"></div>
<div id="box-green"></div>

第二步：编写CSS代码 #

给父容器（这里直接用body就行，也可以单独加一个容器div）设置Flex布局：

/* 给body设置Flex布局，让子元素水平排列 */
body {
  display: flex;
  /* 盒子之间的间距，可根据需求调整 */
  gap: 20px;
  /* 垂直方向居中（可选，让盒子在页面垂直居中） */
  align-items: center;
  /* 水平方向居中（可选，让盒子在页面水平居中） */
  justify-content: center;
  /* 让body占满整个视口高度 */
  min-height: 100vh;
  /* 去掉默认margin，避免页面出现空白边距 */
  margin: 0;
}

/* 每个盒子的样式，单独写选择器，不要嵌套 */
#box-grey {
  background-color: grey;
  height: 200px;
  width: 200px;
}

#box-orange {
  background-color: orange;
  height: 200px;
  width: 200px;
}

#box-blue {
  background-color: blue;
  height: 200px;
  width: 200px;
}

#box-green {
  background-color: green;
  height: 200px;
  width: 200px;
}

这样设置后，四个盒子就会整齐地水平排列，还能根据需求调整对齐方式和间距。

方案二：使用inline-block（兼容旧浏览器） #

如果你需要兼容非常老旧的浏览器，可以用这个方法，不过要注意处理块级元素转行内块的空白间隙：

body {
  /* 让盒子水平居中 */
  text-align: center;
  min-height: 100vh;
  /* 简单实现垂直居中（如果盒子里有内容，这个方法可能失效） */
  line-height: 100vh;
  margin: 0;
}

/* 统一设置四个盒子的基础样式 */
#box-grey, #box-orange, #box-blue, #box-green {
  display: inline-block;
  height: 200px;
  width: 200px;
  /* 用margin设置盒子之间的间距 */
  margin: 0 10px;
  /* 让盒子垂直对齐，避免出现错位 */
  vertical-align: middle;
}

/* 分别设置每个盒子的背景色 */
#box-grey { background-color: grey; }
#box-orange { background-color: orange; }
#box-blue { background-color: blue; }
#box-green { background-color: green; }

关键提醒 #

一定要避免把盒子的CSS选择器嵌套写（比如#box-grey #box-orange），每个盒子都是独立的元素，这样布局才能正常生效哦！

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