Question

我想要均匀地浮动3个div（或更一般地说）。我正在建立一个响应主题（有点），我希望根据可用的宽度相应地调整特定项目。

现在是的我可以从随机屏幕测量开始，并计算＆＃34;断点＆＃34; （我通常做的）但是有这么多设备，我试图看看我是否可以以更聪明的方式制作一些真正的弹性，对我来说，这将是更自动的东西。就像一个人甚至与margin 0px auto;等对齐...

例如，

。如果我的父div为1000px宽，div1，div2，div3，div4我希望浮动，240px宽，＆＃ 34;甚至＆＃34;间距，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可能会进行媒体查询，等等等等等等。

然后id必须从数学开始，以制作看起来均匀的好断点。

是否有一种方法可以使得浮动的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;
}

对于不支持flexbox的浏览器，您仍可以自由地在子元素上使用浮点数（请参阅：http://caniuse.com/#search=flexbox）。唯一需要注意的是Firefox不支持包装，所以你必须使用@supports块作为未加前缀的版本（参见：http://www.sitepoint.com/supports-native-css-feature-detection/）。

使用理由可以获得类似的效果：

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

您需要在最后一个子元素之后注释掉或删除任何空格，否则当子项包裹时它们不会正确排列。

Answer 2

试试这个，它适用于动态宽度，

#parent
{
    width:99%;
    text-align:center;
    border-style:solid;
}
.kids
{
   width:23%;
   border-style:solid;
   height:100px;
   display:inline-block;
}

浮动div之间的间距均匀

2 个答案: