在几列中对齐图像

Aligning images under each other in several columns

本文关键字：对齐 图像 几列      更新时间：2023-09-26

我有一组不同宽度和高度的图像，我想在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

我已经设法将最后一列与float: left属性对齐，但其他列保持未对齐。有像float: top这样的东西来对齐图像吗?

仅使用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'
});

Demo and Doc:

  • http://masonry.desandro.com/
  • http://desandro.github.io/masonry/demos/images.html

您正在寻找一个砌体布局库。谷歌masonry layout

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

砌体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>

相关文章：