Question

我有一堆固定宽度的div元素，它们使用inline-block显示类型进行内联流动。这会在行尾留下一个空白区域（下一行div无法安装并包裹到下一行）。

我想做的是，将行上的所有div均匀展开以填充行类似于文本的“Justify”对齐。

换句话说，我想在div元素上设置最小宽度，并在单行中尽可能多地填充它们，并填充整行。

这是我的示例HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
        #container { margin: 100px; padding: 10px; border: 1px solid blue; }
        .item { margin: 10px; width: 300px; min-width: 300px; display: inline-block; border: 1px solid red; }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item One</div>
        <div class="item">Item Two</div>
        <div class="item">Item Three</div>
        <div class="item">Item Four</div>
    </div>
</body>
</html>

纯CSS + HTML有可能吗？或者我是否必须编写脚本来实现此结果？

更新：由于人们一直建议使用百分比宽度来装配单行中的项目，我必须注意，这不是这个问题的意图。我希望有类似“Justified”的文字，但是有块。项目数量是可变的，可能太多。

块需要具有相同的大小，具有默认（最小）宽度，如果需要，将导致它们换行到下一行，并且需要通过扩展子宽度来填充容器的宽度。

更新2：

当前样本产生如下内容：

|--------------------------- Container -----------------------------|
| |------ 1 ------| |------ 2 ------| |------ 3 ------|             |
| |------ 4 ------| |------ 5 ------| |------ 6 ------|             |
| |------ 7 ------|                                                 |

我希望看到这样的事情：

|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |-------- 7 --------|                                             |

或者这个：

|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |------------------------------ 7 ------------------------------| |

每个项目都有最小尺寸，因此在上面的示例中，项目＃4和＃7将不适合线条上的剩余空间并将换行到下一行。我希望已经安装在线上的那些填满空间。

请注意，容器可能会重新调整大小，因为可以重新调整浏览器的大小。所以，如果它变得更小到只有两个项目连在一起的程度，我想看到这样的东西：

|----------------- Container -----------------|
| |-------- 1 --------| |-------- 2 --------| |
| |-------- 3 --------| |-------- 4 --------| |
| |-------- 5 --------| |-------- 6 --------| |
| |------------------- 7 -------------------| |

我希望这清楚了问题的意图。

Answer 1

您可以使用flexbox model执行此操作，但仍存在一些问题。

有一个新的和新的flexbox模型，它确实使事情变得复杂。目前只有Chrome and Opera支持新模型，其他浏览器有＆＃34;部分支持＆＃34;，这意味着他们可能会支持：

older version of the w3 specifications
older syntax
或者他们还没有完全实现新的甚至是旧模型

使用现有的任何东西，我能够将某些内容组合在一起，这些内容适用于 Chrome 26 ， Safari 5.1.7 ， IE10 ，< strong> IE9模式下的IE10 和IE8模式下的 IE10 。可悲的是，我当前的 Firefox版本20 不在该列表中。我不确定它是否适用于旧版本的Firefox（我在帖子底部附近的jsFiddle中添加了所需的CSS，但我没有在我的电脑上安装任何旧版本）。

此link解释了为什么它在 Firefox 20 中不起作用。如果向下滚动到页面底部，则会显示flex-wrap属性：

Firefox（Gecko） - 不支持。 Firefox仅支持单行flexbox。

我对此并不是100％肯定，但在我看来，即使在旧版本中，他们也从未支持flex-wrap属性。对于那些有 Firefox 19 - 版本的人来说，如果我错了，请纠正我，但我认为如果他们有， Firefox 20 至少会依赖于只要它们还没有完全实现新的flexbox模型就可以了。

这个flex-wrap属性可以让大多数其他浏览器出现多线魔法。 ~~预测 Firefox 将为fully supporting the new flexbox model in version 22，即scheduled to be released on June 25, 2013。~~ 更新： Firefox now does support flex-wrap属性from version 28 upwards. /更新

毕竟，根据我最近的研究，这里有一个jsFiddle，它尽可能地完成工作。在使用当前浏览器支持的纯CSS + HTML中，这似乎是最好的。

如果您想要更好的现在，您必须提出一个JS解决方案。也许看看flexieJS的来源并修改浏览器检测代码，以便它也可以处理 Firefox 20 。 box-pack和box-orient位于FlexieJS支持的属性列表中，它们是使其在较旧的 iOS 和 Safari 上运行的属性。

编辑正如@Cimmanon在评论中指出的那样，要让它在旧版浏览器中运行，他们需要支持box-lines: multiple，而他们不会这样做。因此，这不适用于旧版本的 iOS ， Safari 和 Firefox 。我想这解释了为什么 Firefox 20 没有旧的实现可以依赖。由于FlexieJS也不支持box-lines: multiple，因此它的来源可能不会对尝试修复此问题有很大帮助。编写自己的JS修复程序似乎是唯一的现在解决方案。 FlexieJS的开发人员一直致力于polyfill for the new specification。这必须包含一些代码来修复旧版浏览器中的多线。虽然现在看起来没有任何东西。如果你要写点什么，也许你可以联系他获取一些见解。如果你的代码正常工作，请将他的代码传递如果你很幸运，他已经有了一些事情，但尚未在GitHub上完成。

CSS：

#container {
  margin: 100px;
  padding: 10px;
  border: 1px solid blue;
  display: -webkit-box;     /* iOS 6-, Safari 3.1-6 */
  display: -moz-box;        /* Firefox 19- */
  display: -ms-flexbox;     /* IE 10 */
  display: -webkit-flex;    /* Chrome */
  display: flex;            /* Opera 12.1, Firefox 20+ */

  /* iOS 6-, Safari 3.1-6 */
  -webkit-box-orient: horizontal;
  -webkit-box-pack: justify;
  -webkit-lines: multiple;  /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */ 

  /* Firefox 19- */
  -moz-flex-flow: row wrap;
  -moz-justify-content: space-between;
  -moz-box-lines: multiple; /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */ 

  /* Chrome */
  -webkit-flex-flow: row wrap;
  -webkit-justify-content: space-between;

  /* IE10 */
  -ms-flex-flow: row wrap;
  -ms-justify-content: space-between;

  /* Opera 12.1, Firefox 20+ */
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  margin: 10px;
  width: 300px;
  border: 1px solid red;
  -webkit-box-flex: auto;    /* iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1.0;        /* Firefox 19- */
  -webkit-flex: auto;        /* Chrome */
  -ms-flex: auto;            /* IE10 */
  flex: auto;                /* Opera 12.1, Firefox 20+ */
}

Answer 2

你可以这两种方式（如果你知道有多少.items）：

示例一： 浮动.items有效，请参阅小提琴http://jsfiddle.net/David_Knowles/wh5bP/

#container { 
    margin: 100px; 
    overflow:hidden;
    border: 1px solid blue; 
}
.item { 
    width: 23%; /* important: (100% / numberOfItems - margin%) */
    margin: 0 1%; /* important */
    float:left; /* important */
    -moz-box-sizing: border-box; /* only needed to compensate for the border used in your debugging */
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    border: 1px solid red;

}

示例二：

内联块元素对换行符之间的空白区域很敏感。注意.items之间没有空格。 http://jsfiddle.net/David_Knowles/wh5bP/1/

<div id="container">
    <div class="item">Item One</div><div class="item">Item Two</div><div class="item">Item Three</div><div class="item">Item Four</div>
</div>

.item { 
    width: 23%;
    margin: 0 1%;
    display:inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    border: 1px solid red;

}

如果你永远不知道会有多少.items，那么你可以看一下flexbox模型。 http://css-tricks.com/using-flexbox/ http://caniuse.com/flexbox

如果您的目标受众使用IE9或更低版本，那么您还需要使用polyfill。 http://flexiejs.com/

Answer 3

这是Flexbox的工作，但您必须决定如何为非Flexbox浏览器布置内容。将事情与中心对齐可能是你最好的选择。

http://codepen.io/cimmanon/pen/lBDwu

ul {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  text-align: center;
  /*  text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;*/
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

li {
  display: inline-block;
  -webkit-flex: 1 0;
  -ms-flex: 1 0;
  flex: 1 0;
  min-width: 10em;
  background: #CCC;
  border: 1px solid;
  margin: .5em;
}

由于需要包装，只有Chrome，Opera和IE10可以执行此操作。其他人都将获得后备体验。

在HTML中水平放置尽可能多的div，并填充线宽

3 个答案: