padding与布局

两栏布局自适应

等高布局示范

div padding:50% 正方形布局

到布局就看不懂了，啊

padding之布局：

1，div{padding:50%;}，1：1头图布局；

2，margin与padding实现等高布局；

3，两列布局

1、使用百分比单位构建固定比例布局结构

2、配合margin实现登高布局

margin-bottom: -600px; padding-bottom: 600px

3、两栏自适应布局：padding在子元素上

padding在子元素上

padding在容器上

1. 使用百分比单位构建固定比例布局结构（正方形）

.div{padding:50%;}

2. 配合margin等高布局

/*父盒子*/
.box{
   overflow: hidden;
   resize:vertical;
}
/*子盒子*/
.child-orange,.child-green{margin-bottom: -600px;padding-bottom: 600px;}
.child-orange{
   float: left;background: orange;
}
.child-green{
   float: left;background: green;
}

3. 两栏自适应布局

<div class="box">
   <img src="mm.jpg">
    words...
</div>
<div>
   <img src="mm.jpg">
   <div class="auto">words...</div>
</div>

/*padding在容器上*/
.box{
   padding-left: 120px;
}
.box img{
   float: left;
   margin-left: -120px;
}
/*padding在子元素上*/
img{
 float：left；
}
.auto{
 padding-left:120px;
}