单列布局:
水平居中:
水平居中是一种常见的页面布局,多出现于标题。下面是四中水平居中的方法:(这里面全都是针对child来进行操作的)
使用inline-block和text-align来实现:
.parent{text-align: center;}
.child{display: inline-block;}
使用table来实现:
.child{display:table;margin:0 auto;}
使用margin:0 auto来实现:
.child{width:200px;margin:0 auto;}
垂直居中:
使用flex来实现:
.parent{display:flex;align-items:center;}
多列布局:
接下来是重点了(虽然前面也很重要)
左列定宽,右面自适应
利用float和margin来实现:
.left{float:left;width:100px;}
.right{float:left,margin-left:100px;}
两列定宽,中间自适应
![IITFLO~S[9Z(TN~S
MK)0.png
利用float和margin来实现
.left{width:100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}