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

Answer 2

根据您要实现的目标，您可以将垂直堆叠的块放在单独的容器中。像这样：

HTML：

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

        </div>

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

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

        </div>

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

        </div>
    </div>
...

CSS：

.col {
    display: inline-block;
    margin-right:80px;
    vertical-align: top;
}
.block {
    width:350px;
    background-color:#ccc;
    border-radius:5px;
    margin-bottom:80px;
    display:block;
    vertical-align: top;
}

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

如果没有足够的水平空间，列将会换行，因此容器必须具有固定的宽度。

Answer 3

尝试在css中添加vertical-align属性。

.block
{
    width:350px;
    background-color:grey;
    border-radius:5px;
    margin-right:80px;
    margin-bottom:80px;
    display:inline-block;
    vertical-align: top;

}

Answer 4

HTML代码：

<div id="content">      
        <div class="block" style="height:300px;"></div>
        <div class="block" style="height:250px;"></div>
        <div class="block" style="height:300px;"></div>
        <div class="block" style="height:250px;"></div>
        <div class="block" style="height:300px;"></div>
        <div class="block" style="height:250px;"></div>
</div>

CSS：

.block
    {
    width:300px;
    background-color:red;
    margin-right:40px;
    margin-bottom:50px;
    display:inline-flex;
    vertical-align: top;
    }

HTML - 列忽略高度

4 个答案: