前端技巧DIV+CSS网页左右两列布局的多种实现方法

DIV+CSS网页左右两列布局的多种实现方法

两列布局是网页设计中最常用的布局方式,经常用于个人博客网站,企业网站产品列表页和文章站列表页等,本文简单的总结几种常用的两列布局方式:

两列布局.png

下面先创建一个简单的示例页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>两列布局</title>
<style type="text/css">
.left {width:30%;height:300px;background:#fba;}
.right {width:70%;height:300px;background:#8ca}
</style>
</head>
<body>
<div class="wrap">
 <div class="left"> 
 </div> 
 <div class="right">
 </div>
</div>
</body>
</html>

1. 给两个区块设置向左浮动,或者给右区块设置向右浮动,这种方式要注意清除浮动,避免下方的区块错位:

.left {float:left;}
.right {float:left;}

2. 使用定位的方式,设置右区块离左边的距离等于左区块的宽度:

.wrap{position:relative;width:100%;height:300px;}
.left{position:absolute;}
.right{position:absolute;left:30%;}

3. 左区块向左浮动,设置右区块离左边的距离等于左区块的宽度:

.left {float:left;}
.right {margin-left:30%;}

4. 左区块向左浮动,右区块设置为BFC(块级格式化上下文),BFC区域不会与float-box重叠:

.left {float:left;}
.right {overflow:hidden;}

5. 使用flex弹性布局,但就本例来说,给外层元素设置了display:flex就达到效果了,在IE浏览器可能无效:

.wrap {display:flex;}

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/93.html