我正试图让两个并排的盒子占据屏幕的整个宽度.但是,当将宽度设置为50％时,每个盒子要扩展大约10px,宽度大于50％.我究竟做错了什么？
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
#leftside {
width: 50%;
background-color: grey;
padding: 20px;
margin: 0px;
position: relative;
}
#rightside {
width: 50%;
display: inline-table;
background-color: #018DCA;
float: left;
padding: 20px;
margin-left: 50%;
position: relative;
}
.
.
.
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
解决方法
双方需要浮动,并确保你使用盒子大小：边框盒;无论填充和边框大小如何,都要确保宽度为50％.
