Css 三列，具有33%的宽度和边距/填充。为什么最后一列要中断？

我试图以%为单位给出页面的宽度

所以我尝试了以下代码

<div id="mainContent" style="height: 350px">
               <div class="grid4">

                </div>
                <div class="grid4">

                </div>
                <div class="grid4">

                </div>

            </div>

以及

100%中的主要内容宽度。

现在，我尝试为任何一个

grid4

下一个Div-one向下推，以百分比形式给出

填充或边距

我应该使用什么属性为宽度提供内部填充

谢谢
如果将填充或边距应用于
.grid4
列，则它们的大小将添加到列的宽度：33%+33%+33%+（无论填充和边距的组合是什么）=？？（最有可能大于100%的东西）。这就是为什么柱子断了

如果将填充或边距应用于每列的子元素，则大小不会添加到列的宽度中。33%+33%+33%=99%

如果确实需要将填充或边距应用于列，则当与填充或边距结合使用时，必须将宽度减少到100%或更少。
如果将填充或边距应用于
.grid4
列，然后，它们的大小将被添加到列的宽度中：33%+33%+33%+（无论组合的填充和边距是什么）=？？（最有可能大于100%的东西）。这就是为什么柱子断了

如果将填充或边距应用于每列的子元素，则大小不会添加到列的宽度中。33%+33%+33%=99%

如果您确实需要将填充或边距应用于列，那么您必须将宽度减少到与填充或边距组合时加起来等于或小于100%的量。
在标准CSS框模型中，填充将其值添加到容器的宽度。（宽度+填充+边框=框的实际可见/渲染宽度）

所以你的网格宽度=33%+填充。这就是为什么它会把它往下推

您可以使用CSS框大小调整-这允许您将填充添加到容器中，并且它的实际宽度仍保持不变，与您指定的相同

#mainContent{
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;   
            box-sizing: border-box;     
}

那么它应该按照你想要的那样工作

否则，您需要计算每个网格4的填充和宽度，使其总计为33%。
在标准CSS框模型中，填充将其值添加到容器的宽度中。（宽度+填充+边框=框的实际可见/渲染宽度）

所以你的网格宽度=33%+填充。这就是为什么它会把它往下推

您可以使用CSS框大小调整-这允许您将填充添加到容器中，并且它的实际宽度仍保持不变，与您指定的相同

#mainContent{
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;   
            box-sizing: border-box;     
}

那么它应该按照你想要的那样工作

否则，您需要计算每个网格4的填充和宽度总计为33%。
我发现的最简单的方法是将3个向上分区的每个分区包装在第二个分区中。包装器设置为33%宽度，然后容器应用了边距

CSS如下所示：

.one_third {
    width: 33%;
    float: left;
    text-align: center;
}
.boxes {
    background: #8888ff;
    margin: 3px;
    padding: 10px;
}

还有一个类似这样的HTML

<div class="one_third">
    <div class="boxes">
        Hi there!
    </div>
</div>
<div class="one_third">
    <div class="boxes">
        Hi there!
    </div>
</div>
<div class="one_third">
    <div class="boxes">
        Hi there!
    </div>
</div>


你好！
你好！
你好！

请参见此处的操作：
我发现的最简单的方法是将3-up div分别包装在第二个div中。包装器设置为33%宽度，然后容器应用了边距

CSS如下所示：

.one_third {
    width: 33%;
    float: left;
    text-align: center;
}
.boxes {
    background: #8888ff;
    margin: 3px;
    padding: 10px;
}

还有一个类似这样的HTML

<div class="one_third">
    <div class="boxes">
        Hi there!
    </div>
</div>
<div class="one_third">
    <div class="boxes">
        Hi there!
    </div>
</div>
<div class="one_third">
    <div class="boxes">
        Hi there!
    </div>
</div>


你好！
你好！
你好！

请参见此处的操作：
您有三个宽度为33%的网格，总宽度为99%。如果添加1%的填充，则新的填充总数将达到102%（或更多）。因此div将被包裹。你有三个33%宽度的网格，总共99%。如果添加1%的填充，则新的填充总数将达到102%（或更多）。所以Div将被包装。所以Grid4中的Div和我会做一些事情。对吗？@user2067567:这应该可以在不破坏列的情况下工作，是的。这是最简单的方法。这样，您就可以完全独立于宽度来处理边距和填充，而不会有边距和填充导致列中断的风险。所以Grid4中的Div和我会做一些事情。对吗？@user2067567:这应该可以在不中断列的情况下工作，是的。这是最简单的方法。这样，您就可以完全独立于宽度来处理边距和填充，而不会有边距和填充导致列中断的风险。边距仍会占用列宽之外的空间。但这至少可以防止填充打断列。当然，您需要将边距设置为0或包含在列空间的计算中。边距仍会占用列宽以外的空间。但这至少可以防止填充破坏列。当然，您需要将边距设置为0或包含在列空间的计算中。