将图像彼此对齐 [英] Align images on each other

问题描述

我不知道是否知道我的头痛的解决方案，我想第一个图像的第一个。但由于第二个图像高度比第一个图像高，因此会创建空白空间。

现在看起来如何

代码：

每个图片代码块看起来都是一样的

  column_1_5_of_3 {width：100％;} col_nomargin {display：inline-block;位置：相对;向左飘浮;保证金：0％0％0.25％0.25％; overflow：hidden;} portimg {width：100％;身高：自动;保证金：0％0 0％0％;过渡：.5s缓解; display：block;} column_1_5_of_3 {width：100％;} col_nomargin {display：inline-block;位置：相对;向左飘浮;保证金：0％0％0.25％0.25％; overflow：hidden;} portimg {width：100％;身高：自动;保证金：0％0 0％0％;过渡：.5s缓解; display：block;}  

 < div class =col_nomargin column_1_of_3\" > < img class =portimgsrc =alt =>  

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

感谢您的全力帮助

解决方案

I已添加名为 .photos 的类，并将其添加/移除到 .portimg 某些CSS。

$ b $ column-count 属性指定一个元素应该分成的列数和列间距属性指定列之间的空白。

请参阅

  .column_1_5_of_3 {width：100％;}。col_nomargin {display：inline-block;位置：相对;向左飘浮;保证金：0％0％0.25％0.25％;溢出：隐藏;}。portimg {/ *以防万一有内联属性* /宽度：100％！重要; height：auto！important;}。column_1_5_of_3 {width：100％;}。photos {/ *防止垂直间距* / line-height：0;列数：5; column-gap：2px;}。col_nomargin {display：inline-block;位置：相对;向左飘浮;保证金：0％0％0.25％0.25％; overflow：hidden;} .portimg {transition：.5s ease;显示：块; margin：2px;}  

 < div class =col_nomargin column_1_of_3张照片> < img class =portimgsrc =http://via.placeholder.com/100x300alt => < img class =portimgsrc =http://via.placeholder.com/100x200alt => < img class =portimgsrc =http://via.placeholder.com/100x300alt => < img class =portimgsrc =http://via.placeholder.com/100x400alt => < img class =portimgsrc =http://via.placeholder.com/100x300alt => < img class =portimgsrc =http://via.placeholder.com/100x100alt => < img class =portimgsrc =http://via.placeholder.com/100x300alt => < img class =portimgsrc =http://via.placeholder.com/100x600alt => < img class =portimgsrc =http://via.placeholder.com/100x200alt => < img class =portimgsrc =http://via.placeholder.com/100x600alt => < img class =portimgsrc =http://via.placeholder.com/100x100alt => < img class =portimgsrc =http://via.placeholder.com/100x900alt => < / div>  

I wonder if anyhow know a solution to my headache, i want the third image to be under the first. But as the second image height is larger than the first it creates empty space.

How it looks right now

Code:

Every image code block looks the same

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

If there is something i have missed or any questions. Please do tell

Thank you for all the help

解决方案

I've added a class named .photos and added/removed to .portimg some css.

The column-count property specifies the number of columns an element should be divided into and the column-gap property specifies the gap between the columns.

See CSS-Tricks for more informations.

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

这篇关于将图像彼此对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！