在两个div之间对齐div

Question

在两个div之间对齐div

两者之间的两个div没有与两侧的两个红色div正确对齐。 我用“.menu：nth-​​child（2n）{margin-top：-20px;}”作为Monika的建议，但仍然无法得到结果

<script>
    function showPaper(id)
    {
        alert(id);
        //Do something
    }
</script> 

Answer 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>

Answer 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;
}`