0

現在、ウィンドウとコンテナーのサイズに応じて適切にスケーリングされる画像のグリッドがあります。

http://jsfiddle.net/AndyMP/2zND2/13/

これまでのところ、既存の構造を壊さずに画像を DIV でラップしようとして失敗しました。これどうやってするの？

CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   width: 100%;
}
#photos img {
  /* Just in case there are inline attributes */
  width: 20%;
  height: auto;
  float:left;
  overflow:hidden;
}

@media (min-width:1200px) {
  #photos img {
  /* 5 images wide */
  width: 19.2% ; margin: 0 1% 1% 0;
  }
  #photos img:nth-child(5n) { margin: 0 0 1% 0; }
}

@media (min-width:800px) and (max-width: 1200px) {
  #photos img {
  /* 5 images wide */
  width: 19.2% ; margin: 0 1% 1% 0;
  }
  #photos img:nth-child(5n) { margin: 0 0 1% 0; }
}

@media (min-width:400px) and (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 24.25% ; margin: 0 1% 1% 0;
  }
  #photos img:nth-child(4n) { margin: 0 0 1% 0; }
}

@media (min-width:300px) and (max-width: 400px) {
  #photos img {
  /* 2 images wide */
  width: 49% ; margin: 0 2% 2% 0;
  }
  #photos img:nth-child(2n) { margin: 0 0 2% 0; }
}

@media (max-width: 300px) {
  #photos img {
  /* 1 image wide */
  width: 100% ; margin: 0 0 2% 0;
  }
}
4

1 に答える 1

1

まず、これから説明する手順を適用した後に得られる最終結果は次のとおりです: little link .

1)imgそれぞれを でラップしdivます。

2) CSS ルールを追加します。

#photos div {
    display: inline-block;
}

3)すべてのセレクター#photos imgを に変更します#photos div。

4)追加:

#photos div img {
    width: 100%;
}
于 2012-09-10T18:45:53.440 に答える