CSS浮动，中间有相等的排水沟答案

【问题标题】：CSS floats with equal gutters in-betweenCSS浮动，中间有相等的排水沟
【发布时间】：2014-10-17 20:57:47
【问题描述】：

经过多次实验，我想出了一种在花车之间添加固定、相等的排水沟的方法。我的解决方案包括正负边距和许多包装器，因此看起来有些麻烦。不过，我认为它是最终的，直到我意识到它只适用于等高的花车。

我在追求这个：

+-------------------------------+
|+---+ GUTTER +---+ GUTTER +---+|
||   |        |   |        |   ||
|+---+        +---+        +---+|
+-------------------------------+

结构如下：

<div class="container-with-negative-margins">
    <div class="floated-container-with-set-width">
        <div class="container-with-positive-margins">
            <p>sample text</p>
        </div>
    </div>
</div>

这是一些示例 css：

.container-with-negative-margins {
    margin: -10px;
}
.floated-container-with-set-width {
    float: left;
    width: 33.33%;
}
.container-with-positive-margins {
    margin: 10px;
    /* the jsfiddle includes a fixed height and overflow: hidden, but I don't want that */
}

如果我添加内容以使<div>s 不再具有相同的高度，它就不再起作用了。

有什么想法吗？

【问题讨论】：

标签： html css css-float margin

【解决方案1】：

在不破坏您的解决方案的情况下，您是否尝试过使用 CSS3 类型选择器？

例如：

div.container div {
    margin: 10px;
    display: inline-block;
    float: left;
}

div.container div + div {
    margin-left: 50px; /* or 10% or whatever */
}

让第2、3等元素有更多的margin。

【讨论】：

我知道，也可以使用 :first-child 和 :last-child。我只是想走一条不同的路。
+ 实际上是 CSS2 组合子。

【解决方案2】：

解决方案有效。有一个错字——类名的大写错误……提出问题的方式清楚地表明清除浮点数有问题。

我也更新了小提琴。

【讨论】：

【解决方案3】：

看起来您正在尝试重新发明轮子。只需尝试使用不太知名但令人惊叹的FLEX PROPERTY

here 你有一些 sn-ps 和如何在许多场景中使用它的示例，包括你的。

【讨论】：

感谢您的指点。此外，Bootstrap 也有类似的东西，使用边距和填充的组合以及 box-sizing: border-box（此处解释为 helloerik.com/…）