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

Question

我正在尝试在我的网站中间创建一个内容容器，其宽度不能超过一定的大小（1194px），并且左右两侧始终有至少242px的边距。如果容器宽度大于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

然而，给.projectContainer一个width:32.160804%;的值似乎不起作用。这是一个四舍五入误差吗？我该如何实现我想要的效果？

- GtwoK

---

JS是一种可行的选择。顺便说一句（没有完全正确地阅读问题，但似乎CSS不适合进行太多计算）。 - Mr. Alien

你需要使用 @MediaQueries 来解决这个问题。 - thomaux

是的，媒体查询将满足您的需求。 - ZEE

@Anzeo 不好意思，MediaQueries是什么？我需要在帖子中标记吗？ - GtwoK

当然，给你的问题打上相关标签是让你的问题被注意到的好方法。 - thomaux

Answer 1

对于第一个问题：

请参考此示例，您可以为子div（宽度为1194的div）定义margin auto，并为容器设置min-width: 1194+242+242=1678px。

这将确保两侧有最小242像素的边距，当页面宽度增加时，边距会增加（而不是子元素宽度），子元素仍然保持1194像素。

<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;
}

- Naeem Shaikh

---

谢谢，但我不想让子元素静态地保持在1194像素，我希望它的宽度是其容器的宽度减去两侧242像素的边距。也就是说，除非子元素为1194像素并且其容器更宽，否则子元素应保持为1194像素，而边距应增加。 - GtwoK

@GtwoK.. 你看一下，你可以给父容器添加填充来实现这个效果 http://jsfiddle.net/1u9en8eb/4/ - Naeem Shaikh

如果你想填充两个或三个.projectContainer div，并且不知道实际上会有多少个，那么你应该使用JavaScript设置宽度。我猜即使是媒体查询在这种情况下也不起作用。 - Naeem Shaikh

@GtwoK，你想让你的“child” div在父元素有剩余空间时超过“1194px”吗？如果是这种情况，你可以像这样从子元素中删除max-width：http://jsfiddle.net/1u9en8eb/9/ - Naeem Shaikh

让我们在聊天中继续这个讨论。 - GtwoK

Answer 2

尝试使用

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

用于响应式样式

- Riky Cloud

---

我不确定我理解这里发生了什么。你能提供一些文档链接让我可以阅读吗？ - GtwoK

例如http://www.w3schools.com/cssref/tryit.asp？filename=trycss3_media_example1 - Riky Cloud

啊，我明白了。这并不能实现我所问的问题，但对我以后的某些事情非常有用。谢谢你给我展示！ - GtwoK

Answer 3

使用这个代码。不需要响应式CSS，因为这已经是响应式的了。

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

- Anthony Carbon

---

这将如何确保边距至少为242px？ - thomaux

在我的情况下，我没有使用太多的左对齐或右对齐边距。相反，我使用了margin 0 auto来使元素居中。这些边距至少为242px，在不同的窗口屏幕上会给你带来很多麻烦。 - Anthony Carbon

OP明确要求边距两侧至少为242px。尽管这可能会在较小的屏幕上引起问题，但你应该在回答中明显地说明这一点。缺乏任何上下文，似乎你没有理解问题的含义。 - thomaux