如何使第二行 Div 与第一行上的 Div 垂直对齐答案

【问题标题】：How to Make Second Row Divs Have Vertical Align Top to Divs on the First Row如何使第二行 Div 与第一行上的 Div 垂直对齐
【发布时间】：2016-10-09 05:28:41
【问题描述】：

我在第一行的 div 与顶部完美对齐。但是，第一行的某些 div 的高度不同，因此下一行的 div 不与第一行 div 底部的最顶部对齐（你的大脑受伤了吗？请参阅我的 JS Fiddle： http://jsfiddle.net/RHM5L/258/)。

这是我的示例代码（或参见上面的 JS Fiddle）：

HTML：

<!-- Not Properly Aligned Divs -->
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
    <div class="small"></div>
    <div class="big"></div>
</div>
<!-- Properly Aligned Below -->
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
    <div class="small" style='position:relative; top: -30px;'></div>
    <div class="big"></div>
</div>

CSS：

.container{ 

    border: 1px black solid;
    width: 320px;
    height: 300px;    

}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 40%;
    background: beige;    
}

注意：在第二个“容器”中，div 正在执行我希望他们在第二行中执行的操作。然而，要做到这一点，我必须手动操纵第 3 个 div 的位置，以便将其向上移动几个像素。有没有办法在不手动输入顶部像素的情况下做到这一点？

【问题讨论】：

标签： html css alignment positioning vertical-alignment

【解决方案1】：

这是一个小提琴演示 http://jsfiddle.net/DhwaniSanghvi/RHM5L/260/

您可以使用 column-count 和 column-gap 属性。

HTML：

<section id="photos">
  <img src="http://sneakerbardetroit.com/wp-content/uploads/2016/02/wing-it-air-jordan-2-retro-2.jpg">
  <img src="http://retro-nouveau.com/wp-content/uploads/2013/07/Retro-Radio-Vector1"/>
  <img src="http://www.topdesignmag.com/wp-content/uploads/2010/10/Retro-wallpaper-33.jpg"/>
  <img src="https://image.freepik.com/free-vector/retro-microphone-background_23-2147513792.jpg">
  <img src="http://www.freevectors.net/files/large/RetroDesign.jpg"/>
</section>

CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 2;
   -webkit-column-gap:   0px;
   -moz-column-count:    2;
   -moz-column-gap:      0px;
   column-count:         2;
   column-gap:           0px;
}

#photos img {
  width: 100% !important;
}

【讨论】：