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，它也只显示一个列。

- XLordalX

---

你需要使用Flexbox来实现这个。请阅读这篇文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Andy Furniss

它被称为“砖石布局”。只需在谷歌上搜索并选择任何实现即可。 - 0x860111

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...），它们通常不必使用，只需设置高度：自动，以便它占用显示所有内容所需的高度。

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

- Arber Braja

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

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

- Dave 5000

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;

}

- Rai