Question

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

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

<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

每个Box中的Border-Width都计入宽度。看看Box-Model：http://www.w3schools.com/css/css_boxmodel.asp

Answer 3

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

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%;
}

这似乎对我有用。如果我离开高度，我只能像你所说的那样得到一条实线。

盒子弄乱了

4 个答案: