How to place blocks under one another

Question

What can I do so that blocks of different heights are separated by regular spacing?

For example, block 2 in the picture below should be right under block 1.

Answer 1

您可以将页面划分为左浮动列，然后使用普通div填充每列。

＆＃13;

＆＃13;

* {                      /* 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%;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;