使用不同大小的框创建网格

Question

如何在每列中使用带有div框的3列制作网格？内部div盒可以具有不同的高度。内容将从数据库中提取。

Answer 1

如果您没有覆盖默认行为的CSS规则，则默认情况下，div的高度将根据其内容增大或缩小。您可以通过制作3个容器div并将它们并排浮动来创建3列。每个容器内部可以是动态创建的div。

这是一个例子。

html, body{ height:100%; width:80%; }

.container{ 
    padding:1%;
    padding-right:2%;
    padding-left:2%;
    width:25%;
    margin-right:1%;
    background-color:#eee; 
    float:left;
}

.dynamic{
    background-color:#ddd;
    padding:4%;
    margin-top:5%;
    margin-bottom:5%;
}

<div class = "container">
    <div class = "dynamic">
        content
    </div>
    <div class = "dynamic">
        content<br>
        content<br>
        content
    </div>
    <div class = "dynamic">
        content<br>
        content
    </div>
    <div class = "dynamic">
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
    </div>
        <div class = "dynamic">
        content<br>
        content<br>
        content<br>
        content
    </div>
</div>

<div class = "container">
    <div class = "dynamic">
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
    </div>
    <div class = "dynamic">
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
    </div>
    <div class = "dynamic">
        content<br>
        content<br>
        content<br>
    </div>
</div>

<div class = "container">
    <div class = "dynamic">
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
    </div>
</div>

请注意，每个内部div的高度都直接随其内容增长。如果您希望容器div是固定高度，只需在CSS中设置值。