css布局之两列布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css布局之两列布局相关的知识，希望对你有一定的参考价值。
我们见过两列布局的网站也很多，不过这种两列布局的分为两种：自适应和固定宽度
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>
以上是关于css布局之两列布局的主要内容，如果未能解决你的问题，请参考以下文章
div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做
div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做