html - 定位 block ，垂直对齐

Question

我的代码:

<div class="wrapper">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>
<style>
    .grid-item{display: inline-block; vertical-align: top; width: 20%;}
</style>

如何在不使用绝对定位的情况下将 block 一个接一个地放置？

---

Answer 1

你可能想要这样的东西:

---

演示

.grid-column {
    float: left;
    width: 25%;
}
 
.grid-cell {
   vertical-align: top;
   background: #a00606;
   color: #fff;
   margin: 10px 20px;
   padding: 5px;
   text-align: center;
   font-weight: bold;
   font-family : Arial, Verdana, 'sans-serif';
}

<div class="grid-column">
    <div class="grid-cell">DIV#1<br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#5<br/><br/><br/><br/><br/><br/></div>
</div>
<div class="grid-column">
    <div class="grid-cell">DIV#2<br/><br/><br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#6<br/><br/><br/><br/></div>
</div>
<div class="grid-column">
    <div class="grid-cell">DIV#3<br/><br/><br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#7<br/><br/><br/><br/></div>
</div>
<div class="grid-column">
    <div class="grid-cell">DIV#4<br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#8<br/><br/><br/><br/><br/><br/></div>
</div>