彼此对齐图像

Question

我想知道无论如何知道解决我头痛的问题，我希望第三张图片在第一张图片之下。但是当第二个图像高度大于第一个图像高度时，它会创建空白空间。

现在看起来如何

代码：

每个图像代码块看起来都相同

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果有什么我错过了或有任何问题。请告诉

感谢您的所有帮助

Answer 1

＆＃13;

＆＃13;

.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;
	  
	
	}
		
	}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

试试这段代码

Answer 2

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

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

有关更多信息，请参阅CSS-Tricks。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;