css - float div 之间的均匀间距

Question

我想均匀地 float 3 个 div(或更一般地说)。 我正在构建一个响应式主题(有点)，我希望特定元素根据可用宽度进行相应调整。

现在是的，我可以开始进行随机屏幕测量并计算“断点”(我通常做的)但是有这么多设备，我想看看我是否可以以更智能的方式做出真正灵活的东西我，会更自动化。 就像当一个人甚至与说 margin 0px auto; 等对齐时......

举个例子。如果我的父 div 的宽度为 1000px，而我想要 float 的 div1、div2、div3、div4比如，240px 宽，间距“均匀”，id 可能会这样做。

div1{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div2{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div3{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div4{ float:right; max-width:XXX; min-width:XXX; }

这或多或少会给我均匀的间距。如果我想适应不同的屏幕，id 可能会做一个媒体查询和 blah blah blah

然后 id 必须从数学开始，才能做出看起来均匀的好断点。

有没有办法让 float 的 div 之间的间距保持不变，而无需输入特定数字？再次举个例子，比如当一个人做 margin 0px auto; 例如???

之前可能有人问过，如果问过，我深表歉意。

提前致谢。

Answer 1

如果您的标记看起来与此类似...

<div class="parent">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>c</div>
</div>

Flexbox 可以很容易地做到这一点，你不需要为更窄的设备使用媒体查询。它只是为您重新分配可用空间。

http://jsfiddle.net/END8C/ (包括所有前缀)

.parent {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: -5px; /* optional */
  overflow: hidden; /* optional */
}

.parent div {
  -webkit-flex: 0 0 240px;
  -ms-flex: 0 0 240px;
  flex: 0 0 240px;
  margin: 5px;
}

您仍然可以自由地在子元素上使用 float 作为不支持 flexbox 的浏览器的后备(参见:http://caniuse.com/#search=flexbox)。唯一需要注意的是 Firefox 不支持换行，因此您必须为无前缀版本使用 @supports block (参见:http://www.sitepoint.com/supports-native-css-feature-detection/)。

你可以通过使用 justification 来获得类似的效果:

http://jsfiddle.net/END8C/1/

.parent {
    text-align: justify;
    margin: -5px; /* optional */
}

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

.parent div {
    display: inline-block;
    margin: 5px;
    width: 240px;
}

您需要注释掉或删除最后一个子元素之后的所有空格，否则当子元素换行时它们不会正确排列。