盒子搞砸了

Question

我目前正在为一个大学任务做一个网站，我真的很困惑为什么我想创建的div没有出现。

它似乎不起作用，因为我为三个框添加了代码，它们的宽度与三个框相同。

JsFiddle

<div id="wrapper"> 
    <div id="top"> 
     <div class="logo"> </div> 
    </div> 
    <div id="menu"> 
     <div class="button"> Home </div> 
     <div class="button"> Destinations </div> 
     <div class="button"> Make A Booking </div> 
     <div class="button"> Things To Do </div> 
     <div class="button"> Contact Us </div> 
    </div> 
    <div id="box"> 
    content here 
    </div> 
    <div id="threeBoxContainer"> 
     <div id="deal_one"></div> 
     <div id="deal_two"></div> 
     <div id="deal_three"></div> 
    </div> 
</div> 

Answer 1

你只需要添加box-sizing财产

#deal_one { 
    /*Other Style */ 
    box-sizing:border-box; 
} 

#deal_one { 
    /*Other Style */ 
    box-sizing:border-box; 
} 
#deal_three { 
    /*Other Style */ 
    box-sizing:border-box; 
} 

Reference

Fiddle Demo

Answer 2

您的border-width在每个箱计数到WID日。 看箱子型号：http://www.w3schools.com/css/css_boxmodel.asp

Answer 3

它的因为css宽度只代表内容宽度。总宽度是填充，边距和边框的组合。

Total Width=ContentWidth+Padding+Border+Margin 

因此，给33％的宽度和一些边距，填充和边框使它实际上大于33％。减小宽度尺寸以实现期望的结果。大约30或31％将会很好。

Answer 4

鉴于你在评论中说，一个可能的答案：

HTML底部：

<div id="threeBoxContainer"> 
    <div id="deal_one"></div> 
    <div id="deal_two"></div> 
    <div id="deal_three"></div> 
</div> 
<div id="bigbox"></div> 

CSS：

#bigbox { 
width: 98%; 
height: 300px; 
background-color:rgba(0, 95, 160, 1); 
border: solid 2px black; 
margin-top: 5%; 
} 

这似乎为我工作。如果我离开高度，我只能像你提到的那样得到一条坚实的线。