在一条线上的4x 25％盒子

我开始学习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>

来源

2017-03-31 pawelk

尝试'width：calc（25％ - 10px）'' – Jack

body { 
 
     font-family: Roboto, sans-serif; box-sizing: border-box; 
 
    } 
 
    
 
    #wrapper { 
 
     width: 1000px; 
 
     margin: 0 auto; 
 
    } 
 
    
 
    #block1 { 
 
     width: calc(25% - 10px); 
 
     height: 100px; 
 
     background-color: black; 
 
     float: left; 
 
     margin-right: 10px; } 
 
    
 
    #block2 { 
 
     width: calc(25% - 10px); 
 
     height: 100px; 
 
     background-color: black; 
 
     float: left; 
 
     margin-right: 10px; } 
 
    
 
    #block3 { 
 
     width: calc(25% - 10px); 
 
     height: 100px; 
 
     background-color: black; 
 
     float: left; 
 
     margin-right: 10px; } 
 
    
 
    #block4 { 
 
     width: calc(25% - 10px); 
 
     height: 100px; 
 
     background-color: black; 
 
     float: left; 
 
     margin-right: 10px; 
 
    }

<div id="wrapper"> 
 
    <div id="block1"> 
 
    Stuff1 
 
    </div> 
 
    <div id="block2"> 
 
    Stuff2 
 
    </div> 
 
    <div id="block3"> 
 
    Stuff3 
 
    </div> 
 
    <div id="block4"> 
 
    Stuff4 
 
    </div> 
 

 
</div>

来源

2017-03-31 20:08:50 wykydtronik

您需要从宽度你。减去保证金正确的价值，否则就增加了超过100％的宽度。

尝试

width: calc(25% - 10px); 
height: 100px; 
background-color: black; 
float: left; 
margin-right: 10px; }

来源

2017-03-31 20:04:17 DefaultError

或者尝试通过1％降低您％。

#block4 { 
width: 24%; 
height: 100px; 
background-color: black; 
float: left; 
margin-right: 10px; 
}

来源

2017-03-31 20:11:08 billyhoes

在一条线上的4x 25％盒子

回答

相关问题