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 part：

#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/

我试图使整个事物变得“流畅”，因此在调整大小时，结构保持不变。

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

框宽度必须等于包装器的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;
}

调整标记，以便可以使用内联块而不是浮点数：

<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上使用border而不是margin来获得更小的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;
}

CSS流量棘手的网格

1 个答案: