html - 创建折叠为 2 列的 3 列布局

Question

我正在尝试在超过 1440 像素时创建一个包含 3 列的布局，以及从 800 像素到 1440 像素的两列 - 我得到的媒体查询工作正常，但问题是试图让列垂直对齐：

屏幕截图 http://pichut.eu/x/Screen_Shot_2013-10-13_at_10.png

正如您所看到的，当折叠时第三列左对齐，但是它位于第一列的末尾，但我更喜欢它与第一列的底部对齐！（有意义吗？：L）

这是 cols 的 HTML：

<div class="dyn-col">
    <div class="widget">
       <div class="widget-title">
            Widget Title
        </div>
        <div class="widget-content">
            Widget Contents
        </div>
    </div>
</div>

<div class="dyn-col">
    <div class="widget">
        <div class="widget-title">
            Widget Title
        </div>
        <div class="widget-content">
            Widget Contents
        </div>
    </div>
</div>

<div class="dyn-col">
    <div class="widget">
        <div class="widget-title">
            Widget Title
        </div>
        <div class="widget-content">
            Widget Contents
        </div>
    </div>
</div>

这是我为页面准备的 CSS ......

/*=================================================
Dynamic Cols
=================================================*/
.dyn-col {
    width: 100%;
    display: block;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
    -moz-box-sizing: border-box
}

@media screen and (max-width: 800px) {
    .dyn-col {
        width: 100% !important;
    }
}

@media screen and (min-width: 801px) and (max-width: 1439px) {
    .dyn-col {
        width: 50% !important;
        float: left;
    }

    .dyn-col:last-child {
    }
}

@media screen and (min-width: 1440px) {
    .dyn-col {
        width: 33.3% !important;
    }
}

Answer 1

建议使用 bootstrap 3 让生活更轻松，因为我经常使用它。