0

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

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

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/

我试图使整个事物“流动”，以便在调整大小时，结构保持不变。

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

  • 盒子宽度必须等于包装纸的 1/3
  • 盒子高度必须等于它的宽度（已解决：响应地改变 div 大小保持纵横比）
  • 右边距应该等于 3px
  • 下边距必须等于右边距
  • 没有额外的边距或填充（也没有丑陋的作弊）

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

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

提前致谢。

4

1 回答 1

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;
}

调整了标记，以便可以使用 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 上使用边框而不是边距来获得更小的 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;
}
于 2013-09-19T17:42:15.123 回答