Question

我正在设计一个网站布局，目前看起来像Site snapshot

但是，目前页面上的子元素具有不正确的高度。你能否就这些问题建议任何教程或方法？

使用 Bootstrap框架和响应式设计。

更新：我知道我可以这样写：

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
    </div>
    <div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
    </div>
    <div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
        <div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
    </div>
</div>

但我不知道如何正确地向列中添加元素？

我应该在JS中测量元素的高度，然后将它们附加到列吗？

Answer 1

要获得相同的结果，只需将页面拆分为相同大小的3个div，并在文章的这些列中添加其他div。

类似的东西：

#column {
    width: 30℅;
    display: inline-block;
}

#article {
     width: 100℅;
}

如何在响应式站点中正确布局网格项

1 个答案: