如何使第二行的 div 与第一行的 div 垂直对齐

Question

我在第一行的 div 与顶部完美对齐。但是，第一行的某些 div 高度不同，因此下一行的 div 不会与 div 底部的最顶部对齐第一排（脑子疼了吗？看我的JSFiddle: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;    
}

注意：在第二个 "Container" 中，div 正在做我希望他们在第二行中做的事情。但是，为此，我必须手动操作第 3 个 div 的位置，以便将其向上移动几个像素。有没有办法在不手动输入顶部像素的情况下做到这一点？

Answer 1

这是一个 fiddle 演示 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;
}

如何使第二行的 div 与第一行的 div 垂直对齐

How to Make Second Row Divs Have Vertical Align Top to Divs on the First Row

html

css

alignment

positioning

vertical-alignment

HTML:

CSS