0

以下のCSSを使用して一連の画像を配置していますが、上から下に配置されています。それらを左から右に揃えるにはどうすればよいですか？

言い換えると：

1 | 2 | 3 | 4

5 | 6 | 7 | 8

vs

1 | 3 | 5 | 7

2 | 4 | 6 | 8

#photos {
   line-height: 0;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}
#photos img {
  width: 100% !important;
  height: auto !important;
}

これは、タートリアルからのものです：http: //css-tricks.com/seamless-sensitive-photo-grid/

4

1 に答える 1

0

それはあなたが達成しようとしていることに依存します。HTML5 の使用に本当に行き詰まっている場合は、これがすべてのブラウザーまたはすべてのブラウザー バージョンで機能するとは限らないという事実を考慮する必要があります。継ぎ目のない画像のブロックを作成し、それらを一列に積み重ねようとしているだけの場合は、次を参照してください。

  <style type="text/css">
        #photos {
            float:left;
            width:800px;
        }
        .imageItem{
            float:left;
        }
    </style>
</head>
<body>
        <div id="photos">
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
    </div>
</body>
于 2012-08-30T20:49:27.117 に答える