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

响应式设计 3 列到 1？

Responsive design 3 columns to 1?

html

css

responsive-design

或