0

我有一组使用下面的 CSS 对齐的图像，但它们是从上到下放置的。我如何将它们从左到右对齐？

换句话说：

1|2|3|4

5|6|7|8

对比

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-responsive-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 回答