2

我正在尝试创建一些均匀间隔的列（an 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;
}

这很好用，但有以下两个缺点：

  1. 正如您在演示中看到的那样，第一列和最后一列不与父级的外边缘对齐。
  2. 这不能真正用于响应式。在较小的宽度下您唯一可以做的就是将它们堆叠起来，但我想将它们分开（每行 2 或 3 个）。

我所追求的甚至可能仅在 CSS 中实现吗？我知道在 JS 中有很多方法可以实现这一点，但我追求的是纯 CSS 的解决方案。

PS我不关心IE7-，但我确实需要支持IE8。不过 CSS3 选择器还可以，因为无论如何selectivizr我都在项目中使用（我知道那是 JS ;-)）。

4

2 回答 2

2

回收“如何*真正*证明水平菜单”似乎适合您。基本上，您所描述的行为是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;
}

工作小提琴。

注意：您可能必须根据您使用的重置重新申请所需的font-size和text-align后代（即防止这些属性被继承）ol

于 2012-10-02T10:27:47.927 回答
0

好的，我的第一个想法是使用媒体查询来获得一种响应方法，以便在不同的屏幕尺寸上每行显示多少个，我的第二个想法是使用

     box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

这将停止您稍后可能添加到盒子模型尺寸上的填充。

希望这接近你所追求的。

于 2012-10-01T13:03:06.860 回答