在两个 div 之间对齐 div答案

【问题标题】：Aligning divs between two divs在两个 div 之间对齐 div
【发布时间】：2018-04-14 17:18:03
【问题描述】：

在两个 div 之间对齐 div

中间的两个 div 与两边的两个红色 div 没有正确对齐。我按照 Monika 的建议使用了“.menu:nth-child(2n){margin-top:-20px;}”，但仍然无法得到结果

* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {margin-top:5%;
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}  
<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>

【问题讨论】：

请写你的HTML结构，很容易建议
请发布您的 HTML 代码

标签： html css

【解决方案1】：

screenshot after removing the line

根据您的代码，它们没有对齐，因为您有一个 margin-top 对应于 .main，只需删除该行。

* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}

<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>

【讨论】：

【解决方案2】：

这可以通过使用伪类来实现，请查看下面的css

* { 
  box-sizing: border-box;
} 
.menu {
  height:200px;
  width: 25%;
  float:left; 
  padding: 15px;
  border: 1px solid red;
 background:red;
}
.menu:nth-child(2n){
  margin-top:-20px;
}
.main {
  height:20px;
  width: 50%;
  float:left;
  padding:0px;
  border:1px solid red; 
  background:#222;
}
.mai {
  margin-top:5%;
  height:30px;
  width:50%;
  float:left;
  padding:0px; 
  border: 1px solid red; 
  background:#222;
}`

【讨论】：