css布局

  • 固定宽度的布局
  • 流式布局
  • 弹性布局

固定宽度的两列布局：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>两列布局</title>
<style type='text/css'>
.wrapper {
margin: 0;
padding: 0;
width:960;
}

#left {
width: 670px;
float: left;
background: green;
height: 300px;
overflow: hidden;
}

#right {
width: 230px;
float: left;
background: red;
height: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
<div id="left">
</div>
<div id="right">
</div>
</body>
</html>





流式两列布局：


将容器宽度设为窗口宽度的百分数，流式布局能够相对于浏览器进行伸缩




          #left {
                width: 25%;
                float: left;
                background: green;
                height: 300px;
                overflow: hidden;
            }
            
            #right {
                width: 72.82%;
                float: left;
                background: red;
                height: 300px;
                overflow: hidden;
            }




弹性布局：用em为单位设置元素宽度，可以确保在字号增大时整个布局随之增大


 






            

            
posted @ 
2015-06-23 10:12 
hou_hou 
阅读(129) 
评论(0) 
编辑 
收藏 
举报