Question

我遇到了一个问题，而且我无法在Google上找到合适的关键字..但它似乎是预测性的＆＃34;经典＆＃34;。我有一个网页，让我们说最大宽度为1500px; 我想添加一行，带有5＆＃34; box＆＃34; （div）每个相同大小，以边距分开。

所以我设置宽度为20％，边距为10px。我的问题是我的最后一个div总是下降到下一行，因为边缘。（因为有了边距，我的线条的宽度高于页面的最大宽度）。如果我删除边距，则所有框都正确地位于同一行。

我该怎么做才能让它发挥作用？（除了使用jQuery的outerWidth之外，如果我不能用css轻松完成它，那么这是我的下一步）

这是我的代码，我现在的代码：

<div id="page">
    <div id="numbers">
        <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
             <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
                  <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
                       <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
                            <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
    </div>
</div>

#page
{
    max-size: 500px;
    background-color:grey;
}

.number
{
    background-color:white;
}

.numberwrap
{
    float:left;
    width:20%;
   padding-right:10px;
}

我也做了一个小提琴，测试：http://jsfiddle.net/jKMp5/

谢谢！

解决方案：我只需要在.number上设置padding属性，而不是包装器！或者使用盒子大小！感谢大家

Answer 1

具有宽度百分比的Div将边距和填充宽度添加到其上。

表示宽度为50％的div，边距为右：20px;将是50％+ 20px。

您可以执行以下操作。

<div style="width: 20%;">
   <div style="margin-right: 20px;"></div>
</div>

这将解决它。

或仅仅是以下

.number
{
    background-color:white;
    padding-right:10px;
}

.numberwrap
{
   float:left;
   width:20%;
}

Answer 2

默认box modal，

填充区域扩展了内容区域，内容与其周围的最终边界之间有空白区域。

您可以通过应用box-sizing:border-box

，使用box-sizing属性更改此行为

边界框：

width和height属性包括填充和边框，但不包括边距。

.numberwrap
    {
     box-sizing:border-box;
     /*other styles*/
    }

Demo

Answer 3

问题是（正如您已经说过的）margin正在影响每个div使其大于20%，因此一个解决方案可能是告诉该div保证金包含在width属性box-sizing

中

添加：

.numberwrap {
    box-sizing: border-box;
}

参见jsFiddle示例：http://jsfiddle.net/jKMp5/2/

Answer 4

您可以使用disaply:table和display:table-cell：

<强> CSS

#page
{
    max-size: 500px;
    background-color:grey;
}

.number
{
    background-color:white;
}

.numberwrap
{
    float:left;
    width:20%;
    padding-right:10px;
    display:table-cell;
    /*border: 1px solid black;*/
}
#numbers{
    display:table;
}

fiddle

5个相同尺寸的元素，在同一行，带边距

4 个答案: