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

float の代わりに 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>

CSS を小さくするために、li のマージンの代わりにボーダーを使用していることに注意してください。代わりにマージンを使用するには、追加の要素を使用する必要があります。

境界線と余分な要素を使用しないように 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 に答える