css多种方式实现等宽布局的示例代码
发布时间:2019-01-22 15:33:54 作者:heath_learning 我要评论
本文讲的等宽布局是在不手动设置元素宽度的情况下,使用纯css实现各个元素宽度都相当的效果。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文讲的等宽布局是在不手动设置元素宽度的情况下,使用纯css实现各个元素宽度都相当的效果。
1、使用table-cell实现(兼容ie8)
<style> body,div{ margin: 0; padding: 0; } .table-layout{ display: table;/*父元素必须设置为table*/ table-layout: fixed;/*这个属性一定要有,否则达不到效果*/ width: 50%; margin: 20px auto; } .table-cell-layout{ display: table-cell;/*子元素必须设置为table-cell*/ height: 40px; border: 1px solid #666; border-left: none; } .table-cell-layout:first-child{ border-left: 1px solid #666; } </style> <body> <ul class="table-layout"> <li class="table-cell-layout">li1</li> <li class="table-cell-layout">li2</li> <li class="table-cell-layout">li3</li> <li class="table-cell-layout">li4</li> <li class="table-cell-layout">li5</li> </ul> </body>
2、使用flex布局来实现
<style> body,div{ margin: 0; padding: 0; } .flex-layout{ display: flex; width: 50%; margin: 20px auto; } .flex-item{ flex: 1; height: 40px; border: 1px solid #666; border-left: none; } .flex-item:first-child{ border-left: 1px solid #666; } </style> <body> <ul class="flex-layout"> <li class="flex-item">li1</li> <li class="flex-item">li2</li> <li class="flex-item">li3</li> <li class="flex-item">li4</li> <li class="flex-item">li5</li> </ul> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 左中右三列式页面布局非常常见,这里我们来看一下CSS固定宽度的三列布局运用实例解析,包括等宽等间距的排列方法:2016-06-23
- 随着宽屏显示器的流行,越来越多的网站采用了动态宽度的设计,以求页面在宽屏显示器上保持美观(960px的网页在23寸的显示器上只有半个屏幕的宽度)。动态宽度的框架设计比2009-12-28
- 原文:http://www.gracecode.com/Archive/Display/2254 很多时候,希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时,会把连续的空格解析成一个,所以我们会2008-10-17
最新评论