HTML - 列忽略高度

Question

现在我有这个:

但是我需要这样的东西:

HTML

    <div id="content">      
        <div class="block" style="height:600px;">

        </div>

        <div class="block" style="height:500px;">

        </div>

        <div class="block" style="height:500px;">

        </div>

        ...
    </div>

CSS

.block
{
    width:350px;
    background-color:white;
    border-radius:5px;
    margin-right:80px;
    margin-bottom:80px;
    display:inline-block;
}

#content
{
    position:relative;
    display:inline;
    overflow:auto;
}

我尝试使用列,但效果不佳,即使列数高于1,它也只显示了一列.

Answer 1

这是我的解决方案：

HTML：

<div class="grid-container">
  <div class="third">
    <div class="grid grid1">
      <p>Grid 1</p>
    </div>
    <div class="grid grid2">
      <p>Grid 2</p>
    </div>
  </div>
  <div class="third">
   <div class="grid grid3">
      <p>Grid 3</p>
    </div>
    <div class="grid grid4">
      <p>Grid 4</p>
    </div>
  </div>
  <div class="third">
    <div class="grid grid5">
      <p>Grid 5</p>
    </div>
    <div class="grid grid6">
      <p>Grid 6</p>
    </div>
  </div>
</div>

CSS：

.grid-container {
  width: 100%;
  text-align: center;
  margin-top: 15px;
}

.third {
  display: inline-table;
  width: 30%;
}

.grid {
  border: 1px solid black;
  margin: 10px 0;
}

.grid1 {
  height: 200px;
}

.grid2 {
  height: 100px;
}

.grid3 {
  height: 100px;
}

.grid4 {
  height: 350px;
}

.grid5 {
  height: 200px;
}

.grid6 {
  height: 200px;
}

现在我在这里使用了很多 css 类（grid1、grid2 ...），它们通常不必使用，只需设置 height: auto 即可显示所有内容所需的高度。

工作示例可以在这里找到： http ://cssdeck.com/labs/full/nuauntmo