Question

在彻底研究解决这个问题的方法之后，我仍然没有找到我寻求的答案。我最终决定在stackoverflow.com上发布我的问题因为我终于放弃了试图找到答案。我得到的结果是两个盒子，顶部有内容，底部有一个盒子。这是CSS代码：

#content_area
{
    overflow: hidden;
    display: inline-block;
    background: white;
    margin-top: 20px;
    margin-right: 110px;
    margin-left: 110px;
    margin-bottom: 20px;
}

.box
{
    display:inline-block;
    width: 33.33%;
    float: left;
    background: #FFFFFF;
    padding: 15px;
}

以下是HTML代码：

<div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>

Answer 1

问题是你的填充，如上所述。

这是删除填充和添加颜色的小提琴：http://jsfiddle.net/gj0wmgym

.box
{
    display:inline-block;
    width: 33.33%;
    float: left;
    background: #FFFFFF;
}

Answer 2

您的代码存在的问题是，.box类的宽度为33％，并附加了填充。这导致总宽度超过100％。填充被添加到.box的初始宽度，因为这是默认框模型在CSS中的工作方式。

要解决此问题，请将此行添加到.box的样式声明中：

box-sizing: border-box;

您可以看到实时演示here。如果您想了解有关盒子模型的更多信息，请this article by Chris Coyier is an excellent reference.

Answer 3

据我所知，您的花车工作正常。

您的html缺少id属性，因此请务必将其添加到您的html。

您可能期望浮动不会换行到下一行，这是因为填充被添加到宽度大小（元素大于33％）。您需要设置框大小调整属性see this article

＆＃13;

* {
    box-sizing:border-box;
}

#content_area
{
    overflow: hidden;
    display: inline-block;
    background: white;
    margin-top: 20px;
    margin-right: 110px;
    margin-left: 110px;
    margin-bottom: 20px;
}

.box
{
    display:inline-block;
    width: 33.33%;
    float: left;
    background: #FFFFFF;
    padding: 15px;
}

＆＃13;

<div id="content_area">
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>

＆＃13;

CSS float无效

3 个答案: