以下是我的代码,我想了解为什么 #firstDiv被所有浏览器推倒.我真的想要理解这样一个事实的内在运作,即它被推向下而不是以某种方式向上拉.(我知道如何调整他们的上衣:))
而且我知道它的溢出:隐藏了导致它,但不确定为什么它推动该div向下.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}这是我的标记：
#siteMap {
text-align: center;
background-color: #26AAE1;
color: white;
}
.mapSection {
text-align: center;
width: 32%;
display: inline-block;
padding: 0px !important;
margin: 0 !important;
}
.sectionElem {
display: block;
color: white;
}<div id="siteMap">
<div class="mapSection">
<span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">POWER ON</span>
<a class="sectionElem">Join Now</a>
<a class="sectionElem">Free Trial</a>
<a class="sectionElem">Membership</a>
</div>
<div class="mapSection">
<span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SERVICES</span>
<a class="sectionElem">Download Our App</a>
<a class="sectionElem">Refer a Friend</a>
<a class="sectionElem">Member Login</a>
</div>
<div class="mapSection" style="top:0">
<span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SUPPORT</span>
<a class="sectionElem">Map & Directions</a>
<a class="sectionElem">Contact Us</a>
</div> …