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

Question

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

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

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

---

作为子问题；我这样做是为了让我的页面响应。在.mainContainer 内部，有一系列.projectContainer，每个宽384px，边距7px。其中 3 个的宽度（包括边距）加起来为 .mainContainer 的 1194 像素。到目前为止，这些值一直是静态的。但是现在.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（宽度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;
}

Answer 2

使用这个伙伴。不需要响应式 css，因为这已经是响应式的了。

.mainContainer {
    margin:0 auto;
    max-width:1194px;
    width:100%;
}

Answer 3

尝试使用

@media screen and (max-width : 1194px) {
   code css 
}

响应式风格