1

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

现在是的，我可以从随机屏幕测量开始并计算“断点”（我通常会做的），但是有这么多设备，我试图看看我是否能以更智能的方式做出真正的弹性，对我来说，会成为更自动的东西。就像当一个人甚至与说margin 0px auto; 等对齐时......

例如。如果我有 1000px 宽的父 div，并且div1我想浮动在说，div2宽和“均匀”间距div3，id 可能会这样做。 div4240px

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 必须从数学开始，才能做出看起来均匀的断点。

有没有办法让浮动的 div 之间的间距保持甚至不受屏幕宽度的影响，而不必进入特定的数字？再举一个例子，就像一个margin 0px auto;例子一样？？？

以前可能有人问过，如果有，我很抱歉。

先谢谢了。

4

2 回答 2

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-检测/）。

您可以使用 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;
}

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

于 2013-02-23T14:08:48.543 回答
0

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

#parent
{
    width:99%;
    text-align:center;
    border-style:solid;
}
.kids
{
   width:23%;
   border-style:solid;
   height:100px;
   display:inline-block;
}
于 2013-02-23T11:50:30.193 回答