Question

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

Screen shot http://pichut.eu/x/Screen_Shot_2013-10-13_at_10.png

正如你可以看到折叠左对齐时的第三个col，但是它位于第一列的末端下方，但我更喜欢它与第一列的底部对齐！（有意义吗？：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可以让我在做这样的事情时生活更轻松。

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

1 个答案: