html - 使 div 占据边距未使用的全部空间

Question

我正在尝试在我的网站中间创建一个内容容器，该容器的宽度不能超过特定大小 (1194 像素)，并且始终在左侧和右侧至少留有 242 像素的边距。如果容器宽度超过 1194px，边距会增加。如果容器小于 1194px，边距将保持 242px，缩小容器的宽度。 这是我正在使用但无法正常工作的内容。

.mainContainer {
    margin-left:242px;
    margin-right:242px;
    max-width:1194px;
}

但是容器会缩小以适应内容。如果我指定 width:100%;，当容器大于最大值时边距会增加，但容器不会缩小。我错过了什么？

---

作为一个子问题；我这样做是为了让我的页面响应。在 .mainContainer 中，有一系列 .projectContainer，每个 384px 宽，边距为 7px。其中 3 个的宽度(包括边距)加起来就是 .mainContainer 的 1194px。到目前为止，这些值一直是静态的。但是现在 .mainContainer 将变得流畅，我希望 .projectContainer 的宽度也变得流畅——因为 .mainContainer 的宽度减小了， .projectConatiner 也应该如此。

我的数学计算表明，每个 .projectContainer(不包括每边 7px 的边距)应该占 .mainContainer 的 32.160804%:

384px * 3 = 1152px
1152px / 1194px = 0.96482412
0.96482412 / 3 = 0.32160804

然而，将 width:32.160804%; 的值赋予 .projectConatiner 似乎不起作用。这是一个舍入错误吗？我怎样才能实现我正在寻找的东西？

Answer 1

对于第一个问题:

看这个fiddle

您可以为子 div 定义 margin auto(宽度 1194 div)，为容器定义 min-width:1194+242+242=1678px，

这将确保两边都有 242px 的最小边距，当页面宽度增加时，边距会增加(不是子宽度)，并且子元素仅保持 1194px

<div class='container'>

    <div class='child'>1194px</div>

</div>
    .container{
        min-width:1678px;
        height:70px;
        background:green;
    }
.child{
    background:red;
    height:50px;
    width:1194px;
    margin:auto;
}