Question

我有一组具有不同宽度和高度的图像，我想在4列中将它们彼此对齐（中间没有垂直空白）。例如：

<html>
<body>
    <div>
        <img src="https://pbs.twimg.com/profile_images/425063504039538688/sO0mRdKW.jpeg" width="300px">
        <img src="http://w-uh.com/images/1401/cool_picture.jpg" width="300px">
        <img src="http://cdn.cutestpaw.com/wp-content/uploads/2014/01/l-These-are-pictures-of-Jari.jpg" width="300px">
        <img src="http://images4.fanpop.com/image/photos/21900000/Beautiful-Pictures-_-beautiful-pictures-21967793-1024-768.jpg" width="300px">
        <img src="http://images4.fanpop.com/image/photos/22600000/Random-beautiful-pictures-22607571-500-333.jpg" width="300px">            
        <img src="https://pbs.twimg.com/profile_images/425946167050911744/x62a9eBz_400x400.jpeg" width="300px">
        <img src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/16/0s/p0160sdl.jpg" width="300px">
        <img src="http://i.dailymail.co.uk/i/pix/2014/01_01/Racecourse_650x311.jpg" width="300px">
    </div>
</body>

如您所见，第一行和第二行的图片之间有空白区域。我希望以这种方式对齐每个图像，以便列中的上图像和下图像之间没有空白。实例：http://goldenrepublictattoo.com/collection

我设法将最后一列与{{1}}属性对齐，但其他列保持不对齐。是否有float: left之类的图像可以将图像对齐在一起？

Answer 1

您正在寻找一个砌体布局库。 Google为masonry layout。

我最近使用的一个效果很好： http://yconst.com/web/freetile/

Answer 2

只有CSS才能实现这一点。最好的办法是使用像砖石这样的东西。或者根据您的行为方式编写一些自定义JavaScript。

<强> HTML：

<div id="container">
  <img class="item" />
  <img class="item" />
  <img class="item" />
</div>

<强> JS：

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

演示和文档：

Answer 3

MASONRY CSS

*{
    padding: 0; 
    margin: 0;
    box-sizing: border-box;
}

 ul{            
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
        margin: 20px auto;
        padding: 20px 20px 0 20px;
        position: relative;
        width: 980px;        
}
ul li{        
     display: inline-block;
     list-style: none;            
     margin-bottom: 20px;     
     width: 100%; 
}

<ul>
    <li><img src="https://pbs.twimg.com/profile_images/425063504039538688/sO0mRdKW.jpeg" width="300px">
         
      <li><img src="http://w-uh.com/images/1401/cool_picture.jpg" width="300px">
          
      <li><img src="http://cdn.cutestpaw.com/wp-content/uploads/2014/01/l-These-are-pictures-of-Jari.jpg" width="300px">
          
        <li><img src="http://images4.fanpop.com/image/photos/21900000/Beautiful-Pictures-_-beautiful-pictures-21967793-1024-768.jpg" width="300px">
            
        <li><img src="http://images4.fanpop.com/image/photos/22600000/Random-beautiful-pictures-22607571-500-333.jpg" width="300px"> 
            
         <li><img src="https://pbs.twimg.com/profile_images/425946167050911744/x62a9eBz_400x400.jpeg" width="300px">    
        
          <li><img src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/16/0s/p0160sdl.jpg" width="300px">
              
            <li><img src="http://i.dailymail.co.uk/i/pix/2014/01_01/Racecourse_650x311.jpg" width="300px">   
</ul>

将图像对齐在几列中

3 个答案: