html5 两栏等宽布局代码,css多种方式实现等宽布局的示例代码

本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯css实现各个元素宽度都相当的效果。

1、使用table-cell实现(兼容ie8)

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;

}

• li1
• li2
• li3
• li4
• li5

2、使用flex布局来实现

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;

}

• li1
• li2
• li3
• li4
• li5

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。