div，宽度为100％（包括边距）

kat 发表于 Dev

我正在尝试创建一个布局，在该布局中堆叠的div会占用页面的整个宽度，包括在两侧的3px缓冲区。换句话说，我不希望它们直接进入屏幕的边缘，但是我仍然希望它们根据屏幕的宽度进行调整。

我已经设法使用填充在div之间获得了3px的空白，但是水平间距出现了问题。如何添加100％宽度中包含的填充？

这是我到目前为止的内容：

HTML：

<div class="container">
    <div class="contentContainer first">
        <div class="content"> content 1 </div>
    </div>
    <div class="contentContainer">
        <div class="content"> content 2 </div>
    </div>
    <div class="contentContainer">
        <div class="content"> content 3 </div>
    </div>
</div>

CSS：

.container{
    border: 1px solid gray;
}

.container .contentContainer{
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    width: 100%;
}
.container .contentContainer .content {
    border: 1px solid gray;
    width: 100%;
    height: 75px;
}

.container .first {
    padding-top: 3px;
}

您可以在此jsFiddle中看到我的尝试。您会注意到mypadding-top和padding-bottom具有预期的效果，而padding-leftandpadding-right不是。

谢谢！

jmore009

请务必在使用box-sizing: border-box时padding强制使用填充行为。至于水平填充，您可以添加padding: 0 3px;到.container

*{ //adds to all elements or you can just add to the ones that use padding
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;    
}

.container{
  border: 1px solid gray;
  padding: 0 3px; <-----add this
}

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。