CSS多种布局方式自我实现-三栏布局（一）
2017-05-07 本文已影响28人
pz明
一、float实现三栏布局
1、HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="第一个三栏布局" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="topbar">This is topbar</div>
<div id="navbar">This is nav bar</div>
<div id="main">
<div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div>
<div id="column_right">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
<div id="column_right_adsense">This is column right adsense This is column right adsense This is column right adsense</div>
<div id="clear">this is clear</div>
</div>
<div id="footer">This is footer</div>
</div>
</body>
</html>
2、CSS代码：
*{
font-size:12px;
padding: 0;
margin:0;
}
body{
background-color: #eee;
}
#container{
background-color: #83A82B;
width:500px;
margin:50px auto;
}
#topbar{
height:25px;
background-color: #31DB20;
}
#column_left{
float:left;
width:250px;
background-color: red;
}
#column_right{
width:150px;
background-color: #0f0;
float:left;
}
#column_right_adsense{
background-color: #00f;
float:left;
width:100px;
}
#clear{
clear:both;
background-color: pink;
}
#footer{
background-color: piple;
}
3、结果展示：
三栏布局
4、注意事项
container、main不直接设置height,由内容区撑起高度，float后加clear元素清除浮动，撑起#main区高度。
5，以上实现方式的缺点
由于main宽度的固定，一旦某一栏添加了padding或margin,则会导致浮动栏下滑（浮动滑移），添加大图片或是没有空格的长字符串也都会打乱布局。
滑动漂移
6，滑动漂移的三种解决办法
6.1 从设定的元素宽度中减去padding或margin的影响。
如：column_left增加padding:1px,则将其宽度减去2px，效果如下：
元素宽度减去影响值
但是此方法操作起来比较麻烦，每次添加需要计算影响并修改代码。
6.2 在元素内部添加新div包裹元素内容
设置padding和margin时应用于这个元素。部分代码如下：
HTML:
<div id="column_left"><div id="column_left_inner">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div></div>
CSS:
#column_left_inner{ padding:10px; margin:10px; }
元素内部再嵌套div包裹内容
此方法较上一种方法更为简单。
6.3 box-sizing:border-box
为容器内各元素设置box-sizing:border-box,将盒模型改为IE盒模型，即盒子宽度=content area+padding+border;注意此方法无法解决margin造成的布局打乱。
部分CSS代码
#column_left{
box-sizing:border-box;
float:left;
width:250px;
background-color: red;
padding:10px;
border:3px solid black;
}
#column_right{
box-sizing:border-box;
width:150px;
background-color: #0f0;
float:left;
}
#column_right_adsense{
box-sizing:border-box;
background-color: #00f;
float:left;
width:100px;
}
效果图：
box-sizing:border-box
此方法最为简单，但是不能消除margin的设置引起的布局混乱。
二、flex三栏布局
flex布局适用于线型布局，使用flex布局能直接有效的避免因padding或border等造成的布局混乱。使用方便，推荐使用此方法。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex实现三栏布局" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="topbar">This is topbar</div>
<div id="navbar">This is nav bar</div>
<div id="main">
<div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis isdafsssssssssssssssssssssssssssssssssssssssssssssssssssss column_leftThis is column_leftThis is column_left</div>
<div id="column_right">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
<div id="column_right_adsense">This is column right adsense This is column right adsense This is column right adsense</div>
</div>
<div id="footer">This is footer</div>
</div>
</body>
</html>
CSS代码：
*{
font-size:12px;
padding: 0;
margin:0;
}
body{
background-color: #eee;
}
#container{
background-color: #83A82B;
width:500px;
margin:50px auto;
}
#topbar{
height:25px;
background-color: #31DB20;
}
#main{
display:flex;
flex-flow:row nowrap;
}
#column_left{
background-color: #f00;
flex-grow:1;
width:150px;
padding:10px;
}
#column_right{
background-color: #0f0;
flex-grow:1;
width:150px;
}
#column_right_adsense{
flex-grow:1;
background-color: #00f;
width:150px;
}
#footer{
background-color: piple;
}
结果展示：
flex实现三栏布局
三、绝对定位实现三栏布局
1. HTML代码
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex实现三栏布局" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="topbar">This is topbar</div>
<div id="navbar">This is nav bar</div>
<div id="main">
<div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div>
<div id="column_center">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
<div id="column_right">This is column right adsense This is column right adsense This is column right adsense</div>
</div> <!--main完-->
<div id="footer">This is footer</div>
</div>
</body>
</html>
CSS代码：
*{
font-size:12px;
padding: 0;
margin:0;
}
body{
background-color: #eee;
}
#container{
background-color: #83A82B;
max-width:500px;
margin:50px auto;
}
#topbar{
height:25px;
background-color: #31DB20;
}
#main{
border:1px solid black;
position:relative;
}
#column_left{
background-color: #f00;
position:absolute;
top:0;
left:0;
width:150px;
height:100%;
}
#column_center{
background-color: #0f0;
margin:0 150px;
}
#column_right{
background-color: #00f;
position:absolute;
top:0;
right:0;
width:150px;
height:100%;
}
#footer{
background-color: red;
/* border:5px solid red; */
}
效果展示：
绝对定位实现的三栏布局
