使div占用边距未使用的整个空间

Question

我正在尝试在我的网站中间创建一个内容容器，它不能超过一定的大小（1194px），并且在左侧和右侧总是至少有242px的边距。如果容器宽度大于1194px，则边距将增加。如果容器小于1194px，边距将保持242px，缩小容器的宽度。 以下是我正在使用的内容并且无效。

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

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

---

作为一个子问题;我这样做是为了让我的页面响应。在.mainContainer内，有一系列.projectContainer个，每个宽384像素，边长7px。其中3个的宽度（包括边距）加起来为.mainContainer的1194px。到目前为止，这些值一直是静态的。但是现在.mainContainer将变得流畅，我希望.projectContainer宽度也是流动的 - .mainContainer宽度减小，.projectConatiner也是如此。< / p>

我的数学表明每个.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

尝试使用

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

用于响应式

Answer 3

使用此好友。不需要响应式CSS因为这已经响应了。

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