如何用CSS访问并定位main容器内的4个嵌套div元素？

嘿，我来帮你搞定这个问题！首先咱们先理清怎么用CSS选中这四个子div，然后给你介绍几种常用的布局方案，你可以根据自己的需求调整～

第一步：用CSS选中目标子div #

你有几种选择方式，按需使用：

• 选中#main下的所有直接子div：#main > div（这种方式不会选中嵌套在子div里的其他div，更精确）
• 单独选中某一个子div：直接用它们的类名，比如.one、.two，或者加上父容器限定更严谨：#main .one

第二步：常用布局方案示例 #

下面是几种主流的布局实现，你可以直接套用并修改参数：

1. Flexbox 布局（最适合一维行/列布局）

如果想让子div横向排列、纵向排列，或者自动分配空间，Flexbox是首选，代码简单易维护：

/* 给父容器设置Flex属性 */
#main {
  display: flex;
  flex-direction: row; /* 子元素横向排列，换成column就是纵向 */
  justify-content: space-between; /* 子元素在主轴上两端对齐，中间留空 */
  align-items: center; /* 子元素在交叉轴上垂直居中 */
  height: 300px; /* 给父容器一个高度，方便看效果 */
  border: 1px solid #ccc;
  padding: 10px;
}

/* 给所有子div设置基础样式 */
#main > div {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

/* 给每个子div设置不同背景色区分 */
.one { background-color: #ff6b6b; }
.two { background-color: #4ecdc4; }
.three { background-color: #45b7d1; }
.four { background-color: #96ceb4; }

你可以调整justify-content的值来改变排列方式：比如center是居中，space-around是每个元素两侧留白，flex-start是靠左对齐。

2. Grid 布局（适合二维网格布局）

如果需要多行多列的复杂布局（比如2×2的网格），Grid布局会更高效：

#main {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列，每列宽度均等 */
  grid-template-rows: 200px; /* 1行，高度200px */
  gap: 10px; /* 子元素之间的间距 */
  border: 1px solid #ccc;
  padding: 10px;
}

#main > div {
  border-radius: 4px;
}

.one { background-color: #ff6b6b; }
.two { background-color: #4ecdc4; }
.three { background-color: #45b7d1; }
.four { background-color: #96ceb4; }

要是想改成2行2列，只需要把grid-template-columns改成repeat(2, 1fr)，grid-template-rows改成repeat(2, 150px)就行。

3. 绝对定位（适合自定义精准位置）

如果需要把每个子div放在页面的任意位置，可以用相对+绝对定位的组合：

#main {
  position: relative; /* 把父容器设为相对定位，作为子元素绝对定位的参考 */
  height: 400px;
  border: 1px solid #ccc;
}

#main > div {
  position: absolute; /* 子元素设为绝对定位 */
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.one {
  background-color: #ff6b6b;
  top: 20px;
  left: 20px;
}

.two {
  background-color: #4ecdc4;
  top: 20px;
  right: 20px;
}

.three {
  background-color: #45b7d1;
  bottom: 20px;
  left: 20px;
}

.four {
  background-color: #96ceb4;
  bottom: 20px;
  right: 20px;
}

这种方式可以精准控制每个div的位置，但需要手动调整top/left/right/bottom的值，适合特殊场景。

如果有更具体的布局需求（比如某个子div要占一半宽度、或者换行显示），可以随时调整这些属性的参数哦～

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