2、用margin，中间模块先渲染
中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。
注意：自适应的div必须放在left和right前面且包含在一个父div里。
html代码：
<div class="main"> <!--看清楚，这里用一个父div包住-->
<div class="content">
自适应
</div>
</div>
<div class="left">
200px
</div>
<div class="right">
200px
</div>
css代码：
html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.main {
width: 100%;
height: 100%;
float: left;
}
.main .content {
margin: 0 200px;
background-color: azure;
height: 100%;
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.left {
margin-left: -100%; //important
}
.right {
margin-left: -200px; //important
}
3、自身浮动
原理：中间列设置margin属性，就是把左右列分别左右浮动。注意：使用这个方法布局自适应的话，必须把自适应的那一列在html中放在left和right后面。
html代码：
<div class="left">
200px
</div>
<div class="right">
200px
</div>
<div class="main">
自适应
</div>
css代码：
html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.main {
margin: 0 200px;
height: 100%;
background-color: azure;
}
.left,
.right {
width: 200px;
height: 100%;
background-color: greenyellow;
}
.left {
float: left;
}
.right {
float: right;
}
自适应布局主要有高度自适应和宽度自适应，本文讲解了三列布局，学会三列自适应布局，两列自适应布局的原理一样，去动手试试吧。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1342.html
微信扫一扫 
支付宝扫一扫 