1

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

所以我尝试了以下代码

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

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

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

                </div>

            </div>

和下面的Grid4 css

.grid4
{
    Width: 33%;
    float:left;
}

和主要内容宽度100%.

现在我试图放弃padding or margin in percentage任何grid4它正在推动下一个 Div 下降。

我应该使用什么属性来为 Width 提供内部填充？

谢谢

4

3 回答 3

4

如果对.grid4列应用填充或边距，则它们的大小将添加到列的宽度：33% + 33% + 33% +（无论填充和边距的组合是什么）= ?? （很可能大于 100%）。这就是柱子断裂的原因。

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

如果您确实需要对列应用填充或边距，那么当与填充或边距结合使用时，您必须将宽度减小到加起来不超过 100% 的量。

于 2013-03-28T04:13:35.063 回答
3

在标准 CSS 盒子模型中，填充将其值添加到容器的宽度中。（宽度 + 填充 + 边框 = 盒子的实际可见/渲染宽度）

所以你的 grid4 宽度 = 33% + padding。这就是为什么它把它往下推。

您可以使用 CSS Box Sizing - 它允许您将填充添加到容器中，并且仍然将其实际宽度更改为您指定的宽度。

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

然后它应该像你希望的那样工作。

否则，您需要计算每个 grid4 的填充和宽度总计为 33%。

于 2013-03-28T04:18:07.940 回答
0

我发现最简单的方法是将 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>

在此处查看实际操作：http: //jsfiddle.net/rkmh56uy/

于 2018-11-30T18:59:58.650 回答