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

Question

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

我有一堆固定宽度的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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

更新2:

目前的样本产生如下:

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

Run Code Online (Sandbox Code Playgroud)

我希望看到这样的事情:

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

Run Code Online (Sandbox Code Playgroud)

或这个:

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

Run Code Online (Sandbox Code Playgroud)

每个项目都有一个最小大小,因此在上面的示例中,项目#4和#7将不适合该行上的剩余空间并将换行到下一行.我希望那些已安装在线上的那些填满空间.

请注意,容器可能会重新调整大小,因为可以重新调整浏览器的大小.所以,如果它变小到只有两个项目连续的程度,我想看到这样的东西:

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

Run Code Online (Sandbox Code Playgroud)

我希望这清除了问题的意图.

Answer 1

Mat*_*tra 11

您可以使用flexbox模型执行此操作,但有一些问题.

有一个新的和一个新的flexbox模型,它确实使事情变得复杂.目前只有Chrome和Opera支持新模型,其他浏览器都有"部分支持",这意味着他们可能会支持:

w3规范的旧版本
一种较旧的语法
或者他们还没有完全实现新的甚至旧的模型

随着今天的任何可用,我能够把一些东西放在一起,这些东西在IE9模式下可以在Chrome 26,Safari 5.1.7,IE10,IE10和IE8模式下运行.可悲的是,我目前的Firefox版本20不在该列表中.我不确定它是否适用于旧版本的Firefox(我在帖子底部附近的jsFiddle中添加了所需的CSS,但我的PC上没有安装任何旧版本).

此链接解释了为什么它在Firefox 20中不起作用.如果向下滚动到页面底部,它会说明flex-wrap属性:

Firefox(Gecko) - 不支持.Firefox仅支持单行Flexbox.

我对此并不是百分之百确定,但在我看来,flex-wrap即使在旧版本中它们也从未支持过该属性.如果我错了,请对任何拥有Firefox 19版本的人纠正我,但我认为如果他们有,只要他们还没有完全实现新的flexbox模型,Firefox 20至少会依赖它.

这个flex-wrap属性使得多线魔术在大多数其他浏览器中发生.~~预测是Firefox将完全支持版本22中的新Flexbox模型,该版本计划于2013年6月25日发布.~~ 更新: Firefox现在支持从版本28向上的flex-wrap属性. / UPDATE

毕竟,根据我最近的研究,这里有一个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 .这必须包含一些代码来修复旧版浏览器中的多线.虽然现在看起来没有任何东西.如果你要写点什么,也许你可以联系他获取一些见解.如果你的代码正常工作,请将他的代码传递如果你很幸运,他已经有了一些事情,但尚未在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+ */
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，4 月前
查看次数：	5864 次
最近记录：	12 年，3 月前