Question

我在第一排的div正在完美地对齐顶部。但是，第一行中的一些div的高度不同，所以下一行的div不会与第一行div的底部最顶端对齐（你的大脑是否受伤？请参阅我的JS小提琴： 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的位置，以便将其向上移动几个像素。有没有办法在不手动输入顶部像素的情况下执行此操作？

Answer 1

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

您可以使用列数和列间距属性。

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

1 个答案:

HTML：

CSS