CSS 流体棘手网格

Question

所以我的问题很简单，尽管我花了几天时间试图找到解决方案。

下面的代码显示了我用像素值得到的结果:

html 部分:

<div id="wrapper">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>

css 部分:

#wrapper { margin:30px auto; width:768px; }
#wrapper ul { width:771px; list-style:none; list-style-type:none; padding:0; margin:0; overflow:hidden; }
#wrapper li { width:254px; height:254px; margin-right:3px; margin-bottom:3px; background:#ebebeb; float:left; }

这是一个总结以上内容的链接:http://jsfiddle.net/7aXLu/

我试图让整个事情变得“流畅”，以便在调整大小时，结构保持不变。

所以这里有一个问题:为了不使用大量的媒体查询，我想用百分比来表达我的值(value)，我知道:

• 盒子宽度必须等于 wrapper 的 1/3
• 盒子的高度必须等于它的宽度(已解决:Responsively change div size keeping aspect ratio)
• 右边距应等于 3px
• 下边距必须等于右边距
• 没有额外的边距或填充(也没有丑陋的作弊)

我试图坚持使用 100% CSS 解决方案，但我想我可能被迫使用 Javascript。

即使您没有确切的线索，我也乐于接受任何建议。

提前致谢。

Answer 1

http://cssdeck.com/labs/6w8wczs5

#wrapper {
    margin: 30px auto;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#wrapper:before {
  display: block;
  content: '';
  padding-bottom: 100%;
}

#wrapper ul {
    position: absolute;
    top: 0;
    right: -3px; /* to offset margin-right (use 0 if you don't want the offset) */
    bottom: -3px; /* to offset margin-bottom (use 0 if you don't want the offset) */
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

#wrapper li {
    width: 33.33333%;
    height: 33.33333%;
    /* using borders here instead of margins for box-sizing purposes
    to avoid using extra elements */
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    background: #ebebeb;
    box-sizing: border-box;
    display: inline-block;
}

调整标记以便可以使用内联 block 而不是 float :

<div id="wrapper">
    <ul>
      <li>a</li><!--
      --><li>b</li><!--
      --><li>c</li><!--
      --><li>d</li><!--
      --><li>e</li><!--
      --><li>f</li><!--
      --><li>g</li><!--
      --><li>h</li><!--
      --><li>i</li>
    </ul>
</div>

请注意，我在 li 上使用边框而不是边距来获得更小的 CSS。要改为使用边距，您必须使用额外的元素。

调整 CSS 以避免使用边框和额外元素:

http://cssdeck.com/labs/6w8wczs5

#wrapper li {
    width: 33.33333%;
    height: 33.33333%;
    padding-right: 3px; /* may be optional */
    padding-right: 3px; /* may be optional */
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}

#wrapper li:before {
  position: absolute;
  background: #ebebeb;
  top: 0;
  right: 3px;
  bottom: 3px;
  left: 0;
  content: '';
  z-index: -1;
}