我正在尝试为项目设计布局。我有两个div容器（leftnav和rightnav），它们分别左右浮动。我必须将中央部分一分为二。“邮件栏”是该中心区域的上层div。问题在于，将边框应用于“ mailbar” div与浮动div重叠。我想防止它重叠。
#main {
margin: 0px;
height: 150px;
border: 1px solid black;
}
#leftbar {
float: left;
width: 250px;
height: 100%;
overflow-y: auto;
border-right: 1px solid black;
}
#rightbar {
float: right;
width: 250px;
height: 100%;
overflow-y: auto;
border-left: 1px solid black;
}
#mailbar {
width: 100%;
height: 50%;
border-bottom: 1px solid black;
}<body>
<div id="main">
<div id="leftbar"> </div>
<div id="rightbar"> </div>
<div id="mailbar"> </div>
</div>
</body>您可以使用％定义的宽度navbars，然后使用剩余的％mailbar并将左边的宽度添加navbar为mailbaras margin-left。
例如：
https://jsfiddle.net/3jjpasum/2/
#main {
margin:0px;
height:150px;
border:1px solid black;
}
#leftbar {
float:left;
width: 15%;
height:100%;
overflow-y: auto;
border-right: 1px solid black;
}
#rightbar {
float:right;
width:15%;
height:100%;
overflow-y: auto;
border-left: 1px solid black;
}
#mailbar {
margin-left: 15%;
width:70%;
height:50%;
background-color: red;
border-bottom: 1px solid black;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句