我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度

1.自适应两列布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列之自适应布局</title>
</head>
<style>
.left{
float: left;
width: 20%;
height: 300px;
background-color: #ccc; }
.right{
float: right;
width: 80%;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div> </body>
</html>

 高度其实在开发中是不要加入的,因为这里是为了更加好的展示这个demo所以设置了高度。这个demo就是自适应的,根据页面的的宽度自动调整左右两列的宽度,大家可以试试。

2.下面是一个固定,一个自适应的两列布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列之固定左列布局</title>
</head>
<style>
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc; }
.auto-right{
margin-left: 200px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="left"></div>
<div class="auto-right"></div> </body>
</html>

  左边我设置了一个宽度,右边的列则使用了margin-left:200px ,这个外边距刚好是左边的宽度。希望对大家有帮助

3.两列固定,我们用一个外部容器保存

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列之固定布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc; }
.right{
float: right;
width: 680px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div> </body>
</html>

  

04-29 00:22