响应式设计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 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