Как разместить блоки друг под другом

Question

Что я могу сделать, чтобы блоки разной высоты разделены регулярным интервалом?

Например, блок 2 на рисунке должен быть прямо под блоком 1.

Answer 1

Вы можете разделить страницу на левые всплывающие столбцы, а затем заполнить каждую колонку обычные дивизии.

* {      /* Reset everything. */ 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
#wrapper {    /* Fixed-width content area. */ 
 
    width: 800px;   /* Set this to a percentage if you like. */ 
 
    margin: 20px auto; 
 
} 
 

 
.column {    /* This is where the magic happens. */ 
 
    float: left;   /* The columns appear side by side. */ 
 
    width: 50%;   /* This is a two-column layout. */ 
 
    padding: 0 1%;   /* Padding won't break the layout thanks to border-box. */ 
 
} 
 

 
h2 { 
 
    padding-bottom: 2%; 
 
} 
 

 
.content {    /* These are the tiles that go inside each column. */ 
 
    padding: 4%; 
 
    margin-bottom: 4%; 
 
    border: 5px solid #c4dcd5; 
 
    background: #f8f9f2; 
 
} 
 

 
p {      /* These go inside the content tiles. */ 
 
    padding-bottom: 1%; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
<div id="wrapper"> 
 
    
 
    <div class="column"> 
 
    <div class="content"> 
 
     <h2> Appetizers </h2> 
 
     <p> Croquettes </p> 
 
     <p> Fingerlings </p> 
 
     <p> Skittles </p> 
 
    </div> 
 
    <div class="content"> 
 
     <h2> Salads </h2> 
 
     <p> Caesar salad </p> 
 
     <p> Spinach salad </p> 
 
     <p> Jello salad with miniature marshmallows</p> 
 
    </div> 
 
    <div class="content"> 
 
     <h2> Drinks </h2> 
 
     <p> Cola </p> 
 
     <p> Water </p> 
 
     <p> Milk </p> 
 
    </div> 
 
    </div><!--end column 1 --> 
 
    
 
    <div class="column"> 
 
    <div class="content"> 
 
     <h2> Sandwiches </h2> 
 
     <p> Reuben </p> 
 
     <p> BLT </p> 
 
     <p> Cucumber and watercress </p> 
 
     <p> Cheese </p> 
 
     <p> Fried tofu delight </p> 
 
     <p> Warm butter sandwich </p> 
 
    </div> 
 
    <div class="content"> 
 
     <h2> Desserts </h2> 
 
     <p> Ice cream </p> 
 
     <p> Toffee </p> 
 
     <p> Skittles </p> 
 
     <p> Sugar on a stick </p> 
 
     <p> Deep-fried chocolate bar </p> 
 
     <p> Candied crickets </p> 
 
    </div> 
 
    </div><!--end column 1 --> 
 
    
 
</div><!--end wrapper -->