列中的图像对齐

我有一组使用下面的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/

来源

2012-08-30 RonnieT

使用html5/css3？ – Grumpy

'float：left;'？ –

这就是CSS技巧的一点，就是垂直堆叠以消除空白。如果您知道它们将如何堆叠，只需更改它们的加载顺序。 – AlienWebguy

这取决于你想要完成什么。如果你真的坚持使用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-30 20:49:27 Joel

列中的图像对齐

回答

相关问题