html - 均匀间隔的固定宽度列 - 在响应式设置中

Question

我正在尝试创建一些均匀间隔的列(ol)，列本身的宽度是固定的。

到目前为止，我已经通过使用 table 布局并在列表项中嵌套一个附加元素来达到预期的效果。

HTML:

<ol>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ol>​

CSS:

ol {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
}

div {
    margin: 0 auto;
    width: 100px;
    height: 250px;
}

这个works great ，但有以下2个缺点:

1. 尽你所能see in the demo ，第一列和最后一列未与父级的外边缘齐平。
2. 这实际上不能用于响应式使用。在较小的宽度下你唯一能做的就是 stack them ，但我想将它们拆分(每行 2 或 3 个)。

---

我所追求的东西仅靠 CSS 就能实现吗？我知道有很多方法可以在 JS 中完成此任务，但我需要一个仅 CSS 的解决方案。

---

P.S.我不关心IE7-，但我确实需要支持IE8。 CSS3 选择器还是可以的，因为我无论如何都在使用 selectivizr在元素中(我知道那是 JS ;-))。

Answer 1

看来你回收合适"how to *really* justify a horizontal menu" 。基本上，您描述的行为是具有相同宽度的内联 block 元素的行为 text-align:justify应用:

ol {
  /*force the desired behaviour*/
  text-align: justify;
  /*remove the minimum gap between columns caused by whitespace*/
  font-size: 0;
}

li {
  /*make text-align property applicable*/
  display: inline;
}

/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 250px;
}

Working fiddle .

注意:您可能需要重新申请所需的 font-size和text-align致 ol 的后代取决于您使用的重置(即防止继承这些属性)