多列等分布局

2020-04-29  本文已影响0人  考拉程序媛

实用float实现

.parent{margin-left:-20px}/假设列之间的间距为20px/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}
利用table实现

.parent-fix{margin-left:-20px;}
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}
利用flex实现

.parent{display:flex;}
.column{flex:1;}
.column+.column{margin-left:20px;}

上一篇下一篇

猜你喜欢

热点阅读