实现三列布局
普通案例：设置好三块的宽高，然后使用浮动布局就可以实现了，看代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Document</title>
<styletype="text/css">
div,body{margin:0;padding: 0;}
#one{
border: 2px solid red;
width: 300px;
height: 600px;
float: left;
}
#two{
border: 2px solid green;
width: 400px;
height: 600px;
float: left;
}
#three{
border: 2px solid yellow;
width: 200px;
height: 600px;
float: left;
}
</style>
</head>
<body>
<divid="one"></div>
<divid="two"></div>
<divid="three"></div>
</body>
</html>
特殊案例：其中要求，左右的高和宽是固定的，中间是可变的，
这是使用浮动是不能够实现的，那我们该怎么做呢?我们使用绝对布局来实现
首先我们这么设置，将第一个块的position的属性值设置为absolute,left=x和top=y的值
然后我们将第三块的position的属性值设置为absolute，right=r和top=y的值设置好
最后我们设置中间那个块:使用margin: 0 rpx 0 xpx;这个特殊之处是：我们缩小浏览器时，中间的那个块会被左右两个块挤压而缩小，当扩大浏览器时，左右两边的块不对中间的块造成挤压时，他会变大，而普通案例就不会有这个效果哦。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Document</title>
<styletype="text/css">
div,body{margin:0;padding: 0;}
#one{
border: 2px solid red;
width: 300px;
height: 600px;
position: absolute;
left: 0;
top:0;
}
#two{
border: 2px solid green;
height: 600px;
margin: 0 200px 0 300px;
}
#three{
border: 2px solid yellow;
width: 200px;
height: 600px;
position: absolute;
right: 0px;
top:0;
}
</style>
</head>
<body>
<divid="one"></div>
<divid="two"></div>
<divid="three"></div>
</body>
</html>
扫一扫
2553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
