现在我有这个:
但是我需要这样的东西:
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,它也只显示一列。
最佳答案
这是我的解决方案:
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
关于HTML - 列忽略高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32910807/