欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-12 10:40:48
...
如果想把多个块级元素放到同一行上,同学们首先想到的是浮动,但是就仅仅独此一种吗,答案不是的。这里小强老师总结了5种布局方式,希望对大家有所帮助。

第一种方法: 浮动法

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


代码如下:





Document




  • 左侧

  • 中间

  • 右侧




效果如下:




第二种方法: 定位法


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

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

我们知道,我们CSS显示模式,有行内显示模式(inline),有块级显示模式(block),还有行内块显示模式(inline-block)

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

例如淘宝网:



代码如下:





Document




  • 左侧

  • 中间

  • 右侧





效果如下:


第四种方法: table-cell


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





Document




  • 左侧

  • 中间

  • 右侧




效果如图所示:



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

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

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





Document




  • 左侧

  • 中间

  • 右侧




效果如图:


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

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

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