解决两侧红色div间内部div未对齐问题：CSS样式调试求助

我来帮你搞定这个对齐问题～首先得说清楚，你之前用的.menu:nth-child(2n){margin-top:-20px;}没效果的核心原因是：这个选择器是给偶数位置的.menu类元素加样式，但你的中间绿色Div是.men类，根本没被这个选择器命中，所以样式自然不会生效啦！

先梳理问题根源 #

看你给出的CSS，.menu是红色Div，.men是绿色Div，你想让绿色Div向上偏移20px和红色Div对齐，但选错了目标元素的选择器，这就是关键问题。另外float布局本身容易出现排版漏洞，我给你两个解决方案，一个是修正现有float写法，另一个是更靠谱的flex布局方案。

方案1：修正现有float布局的选择器 #

假设你的HTML结构是这样的（两侧红色，中间绿色）：

<div class="parent">
  <div class="menu"></div>
  <div class="men"></div>
  <div class="menu"></div>
</div>

那直接给.men类设置偏移即可，不用绕nth-child：

* { box-sizing: border-box; } 
.parent {
  overflow: hidden; /* 清除float带来的父容器高度塌陷问题 */
  margin-top:5%;
}
.menu { 
  height:200px;
  width: 25%; 
  float:left; 
  padding: 15px; 
  border: 1px solid red; 
  background:red; 
} 
.men { 
  height:200px;
  width: 50%; /* 中间占50%，两侧各25%，总宽度100% */
  float:left; 
  padding: 15px; 
  border: 1px solid red; 
  background:green; 
  margin-top:-20px; /* 直接给绿色Div设置向上偏移 */
}

如果是多个红-绿交替的布局（比如红-绿-红-绿...），那可以用父容器下的偶数子元素选择器：

.parent > div:nth-child(even) {
  margin-top:-20px;
  background: green;
}
.parent > div:nth-child(odd) {
  background: red;
}

这样就不用单独写.menu和.men类，更简洁。

方案2：用Flex布局替代float（更推荐） #

float布局是比较老旧的排版方式，Flex布局更灵活可控，能轻松解决对齐问题：

* { box-sizing: border-box; } 
.parent {
  display: flex; /* 开启flex布局 */
  margin-top:5%;
}
.menu { 
  height:200px;
  flex: 1; /* 两侧红色Div各占1份宽度 */
  padding: 15px; 
  border: 1px solid red; 
  background:red; 
} 
.men { 
  height:200px;
  flex: 2; /* 中间绿色Div占2份宽度，总比例1:2:1，对应25%:50%:25% */
  padding: 15px; 
  border: 1px solid red; 
  background:green; 
  margin-top:-20px; /* 同样设置向上偏移 */
}

Flex布局不会有float的高度塌陷问题，而且宽度分配更直观。

最后检查要点 #

• 确保所有Div都在同一个父容器下，这样选择器和布局才能生效
• 如果偏移后绿色Div的顶部被截断，给父容器加padding-top:20px或者overflow:visible

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