我開始學習CSS3並遇到問題,我想創建4個黑盒子(div),並將它們放在一行中,其中3個正常工作,但第4個正在移動到新的線,我做錯了什麼?在一條線上的4x 25%盒子
我的猜測是,因爲10px的餘量,但我不知道如何正確地做到這一點。
* {
margin: 0px;
padding: 0px; }
body {
font-family: Roboto, sans-serif;
box-sizing: border-box; }
#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto; }
#block1 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block2 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block3 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block4 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
<body>
<div id="wrapper">
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
</div> </body>
嘗試'width:calc(25% - 10px)'' – Jack