利用padding布局

发表于 | 分类于

使用百分比构建固定比例布局

移动端：1:1 头图

1
2
3
div{
	padding:50%;
}

配合margin实现等高布局

很大的margin-bottom,padding-bottom值填充缺失的空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box{
	overflow:hidden;
	resize:vertical;
}
.child-orange,child-green{
	margin-bottom:-600px;padding-bottom:600px;
}
.child-orange{
	float:left;
	background-color:orange;
}
.child-green{
	float:left;
	background-color:green;
}

两栏自适应布局

padding在容器上

1
2
3
4
5
6
7
8
<div class="pbox">
	<img src="xx.jpg"> text here Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
1
2
3
4
5
6
7
.pbox{
	padding-left:120px;
}
.pbox img{
	float:left;
	margin-left:-120px;
}

padding在子元素上

1
2
3
4
5
6
7
8
9
<div>
	<img src="xx.jpg">
	<div class="auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
1
2
3
4
img{float:left;}
.auto{
	padding-left:120px;
}

内容参考来自张鑫旭的慕课网视频：(http://www.imooc.com/video/12600).