Question

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

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

参考图片 enter image description here

编辑：我找到的解决方法是将块包装到另一个容器中，其宽度足以覆盖右边距。

Answer 1

<强>已更新

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

这里几个关键的风格是：

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

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

这块：

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

处理元素溢出。

Answer 2

您可以使用flexbox模型代替内联块，我在jsfiddle中包含一个带有crossbrowser的示例：

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/

Answer 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>

防止边距从容器中推出元素

3 个答案: