防止边距将元素推出容器答案

【问题标题】：Prevent margins from pushing elements out of container防止边距将元素推出容器
【发布时间】：2014-05-19 11:24:36
【问题描述】：

我无法在固定宽度的容器（灰色）内安装三个内联块（黑色）。这些块有边距（橙色），问题是即使实际元素（黑色）仍在其容器（灰色）内，最后一个块也会被推入下一行。

当实际块在容器之外时，我希望将块推入下一行，而不是边距。我该怎么做？

参考图片：

编辑：我发现的一种解决方法是将块包装到另一个容器中，该容器具有足够的宽度以覆盖右边距。

【问题讨论】：

一个演示或者它没有发生。 :D
真的吗？这不是默认行为？
是的，默认行为，但每种情况都不同。 inline-block 显示类似单词，中间有空格。有多种方法可以消除间隙。删除元素之间的空格或尝试此方法：codepen.io/pageaffairs/pen/BfIun
它似乎不起作用。顺便说一句，边距是我故意放的。我想要空隙。当只有间隙在容器外时，我只是不希望将块推入下一行。
@ralph.m：空白和边距是两个不同的东西。

标签： html css margin

【解决方案1】：

更新

这是改进后的小提琴：http://jsfiddle.net/CKQLE/3/

这里的几个关键样式是：

text-align: justify; 在容器上均匀分布包含元素内的元素。

font-size: 0; 删除内联块元素附带的空格。

还有这个块：

.container:after{
  content: "";
  width: 100%;
  display: inline-block;
}

处理元素溢出。

【讨论】：

问题是，我不知道哪个是最后一个元素（有更多的块和行）。反应灵敏。

【解决方案2】：

您可以使用 flexbox 模型代替 inline-block，我在 jsfiddle 中包含一个带有跨浏览器的示例：

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

您可以使用舞台的宽度来获得响应式结果 http://jsfiddle.net/X5pg7/

【讨论】：

这个解决方案看起来很简洁。但是我没有看到任何使用网格布局的网站，可能是因为浏览器支持有限？
这篇文章说明了如何将新旧混合使用 Flexbo css-tricks.com/using-flexbox 以获得最佳浏览器支持

【解决方案3】：

您可以改为将边距放在每个盒子的左侧，然后将盒子包装器拉到左边，边距为负。例如。 http://codepen.io/pageaffairs/pen/Hesgu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
section {width: 60%; margin: 0 auto; background: #f7f7f7;}
article {margin-left: -20px;}
div {width: 200px; height: 100px; display: inline-block; margin-left: 20px; background: black;}

</style>
</head>
<body>
<section>
    <article>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </article>
</section>
</body>
</html>

【讨论】：