多个盒子一行排列的方法大全 响应式网页布局_html/css_WEB-ITnose

如果想把多个块级元素放到同一行上，同学们首先想到的是浮动，但是就仅仅独此一种吗，答案不是的。这里小强老师总结了5种布局方式，希望对大家有所帮助。

第一种方法： 浮动法

这种方法是最简单的，也是我们初学css必须掌握的技能，就是把li浮动起来就好了。


代码如下：

        
• 左侧

        
• 中间

        
• 右侧

    

效果如下：

第二种方法： 定位法

这种方法也可以，但是比较少用。

第三种方法： 转换为行内块法

我们知道，我们CSS显示模式，有行内显示模式（inline），有块级显示模式（block），还有行内块显示模式（inline-block）

我们知道，在网页布局中，很多地方，我们能用标准流做的，就不用浮动或者定位来做。因为 inline-block 属于标准流，因此比起浮动和定位，更为稳定。

例如淘宝网：



代码如下：

立即学习“前端免费学习笔记（深入）”；

        
• 左侧

        
• 中间

        
• 右侧

    

效果如下：

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

83

查看详情

第四种方法： table-cell

我们知道 display：table 是转化为表格元素的方法  display:table-cell 转换为单元格元素
 

        
• 左侧

        
• 中间

        
• 右侧

    

效果如图所示：



这种方法不适合ie6、7，但是考虑到ie6.7已经很少很少了，我们可以放心的用它了。

第五种方法： CSS3 布局 display:flex

这是根据CSS3盒子模型，新增属性，有了它书写很方便，而且每个li的宽度可以自适应父盒子，以后用它做响应式网页方便了很多。

        
• 左侧

        
• 中间

        
• 右侧

    

效果如图：

注意： 因为css3肯定有浏览器兼容性问题，大家不要忘了加前缀。在这里，小强老师想让大家代码看的更清除，因此没有加前缀。
例如：display:-webkit-flex;  -webikt-flex:1;

怎么样，原来盒子排列也有这么多方法，特别是后面三种方法，会运用越来越多。因为，以后的网站朝着html5和css3大步前进。

小强零零壹和大家一起分享。