html - 响应式设计 3 列到 1？

Question

我想问一下——如果我有 3 列 DIV，我想根据用户屏幕的宽度(移动设备为 1 列)相应地更改为 2 和 1——最好的方法是什么？ div 元素应该简单地相互堆叠。

<div class="container">
    <div class="row">  
        <!--left-->
        <div class="col1">  
        </div>
        <!--/left-->

        <!--center-->
        <div class="col2">
        </div>
        <!--/center-->

        <!--right-->
        <div class="col3">
        </div>
        <!--/right-->
    </div>
</div>
<!-- /.container --> 

谢谢!

PS 我的设计是这样的:

到

Answer 1

您可以使用 float 属性来完成此操作。您只需要通过向父级添加 overflow:hidden 或使用 clearfix 来清除 float :

FLOAT EXAMPLE

CSS

.row{
    overflow: hidden;
}

.col{
    background: red;
    width: 200px;
    height: 200px;
    float: left;
    margin: 5px;
}

或

您可以使用 display: inline-block; 来做同样的事情

.col{
   background: red;
   width: 200px;
   height: 200px;
   display: inline-block;
   margin: 5px 2px;
}

INLINE-BLOCK EXAMPLE