相互对齐图像[重复]

Question

我想知道是否知道解决我的头痛的方法，我希望第三张图片位于第一张图片下方。但由于第二个图像高度大于第一个，它会产生空白空间。

现在的样子

代码：

每个图像代码块看起来都一样

column_1_5_of_3 {
  width: 100%;
}

col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

portimg {
  width: 100%;
  height: auto;
  margin: 0% 0 0% 0%;
  transition: .5s ease;
  display: block;
}

column_1_5_of_3 {
  width: 100%;
}

col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

portimg {
  width: 100%;
  height: auto;
  margin: 0% 0 0% 0%;
  transition: .5s ease;
  display: block;
}

<div class="col_nomargin column_1_of_3">
  <img class="portimg" src="" alt="">

如果有什么我遗漏的或有任何问题。请告知

感谢大家的帮助

Answer 1

.gal {
	
	
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	  
	
	}	
	.gal img{ width: 100%; padding: 7px 0;}
@media (max-width: 500px) {
		
		.gal {
	
	
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
	  
	
	}
		
	}

<div class="container">


<h1>Pure Css Responsive Masonry Gallery</h1>
<div class="col-md-12">
<div class="row">
<hr>

	<div class="gal">
	
	<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
	
		<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
		
			<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
			
			<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
			
		
			<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
			
			<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
			
				<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""><img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
					<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
						<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
						<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
				
	</div>
	
</div>
</div>
</div>

试试这个代码

Answer 2

我添加了一个名为 .photos 的类并添加/删除到 .portimg 一些 css。

column-count 属性指定一个元素应分成的列数，column-gap 属性指定列之间的间距。

更多信息请参见CSS-Tricks。

.column_1_5_of_3 {
  width: 100%;
}

.col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

.portimg {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

.column_1_5_of_3 {
  width: 100%;
}

.photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   column-count:         5;
   column-gap:           2px;
}

.col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

.portimg {
  transition: .5s ease;
  display: block;
  margin: 2px;
}

<div class="col_nomargin column_1_of_3 photos">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x200" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x400" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x100" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x600" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x200" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x600" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x100" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x900" alt="">
 </div>