您的位置：首页 > Web前端 > CSS

CSS实现左中右三栏布局

2015-04-03 10:37 183 查看

左右定宽，中间自适应

CSS三栏布局（两边固定中间自适应宽度）的方法

1、使用float ，定的用float,自适应的用margin；

利用float：left与right。其中，固定宽度的左右两边用float，并设置好宽度。中间的什么都不用设。

HTML 注意要将设为float的放前面，中间自适应的放在最下面
样例参考链接中的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=gb2312" />
<style type="text/css">
body{margin:0px;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id=side>ddddddd</div>
<div id=side1>ffffff</div>
<div id=main>vvvvvvvvvvv</div>
</body>
<html>

2、使用position absolute

定宽的用position ；和剧边距0，左边DIV据左边距0；右边div剧右边据0

左右绝对定位的没加top：0，那么HTML就需要把自适应中间的main放在最下面，因为main有margin，放前面会把左右的DIV挤下去

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=gb2312" />
<style type="text/css">
body{margin:0px;}
#side { background: #99FF99; height: 300px; width: 120px;position: absolute;left: 0 }
#side1 { background: #99FF99; height: 300px; width: 120px; position: absolute;right: 0 }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id=side>ddddddd</div>
<div id=side1>ffffff</div>
<div id=main>vvvvvvvvvvv</div>
</body>
<html>

切记：左右布局两栏布局时候要把定的写在前面，但是如果加了top:0;自适应的就可以随便放置。

如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=gb2312" />
<style type="text/css">
*{margin: 0 auto;padding: 0}
#side { background: #99FF99; height: 300px;margin-right: 120px}
#side1 { background: red; height: 300px; width: 120px; position: absolute;right: 0}

</style>
</head>
<body>
<div id=side1>ffffff</div>
<div id=side>ddddddd</div>
</body>
<html>

绝对定位加了top；HTML中的main可以任意放置。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0; padding: 0; height: 100%;
}
#left, #right{ top:0;position:absolute; width:200px}
#left {left:0;}
#right {right:0;}
#center{margin:0 200px;}
</style>
</head>
<body>
<div id="left">
<p style="height:999px; background:#8fc41f;">left</p>
</div>
<div id="center">
<p style="height:999px; background:#fffaba; ">center</p>
</div>
<div id="right">
<p style="height:999px; background:#00b7ef;">right</p>

</div>>
</body>
</html>

方法三：利用float与负margin实现

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#main {float: left; width: 100%;background: purple;
}
#mainContainer {margin: 0 100px; height: 200px; background: green;
}
#left {float: left; margin-left: -100%;width: 100px; background: orange; height:200px;
}
#right {float: left; margin-left: -100px; width: 100px; background: orange;
height:200px;
}
</style>
</head>
<body>

<div id="main">
<div id="mainContainer">main content</div>
</div>
<div id="left">
left content
</div>
<div id="right">
right
</div>

</body>
</html>

方法，四个div，三个大框全部float：left。中间的那个，宽度定为100%，中间一个小框开始位置为margin－left：左面框的宽度。左右两个，分别负margin即可。

解释：三个大div，如果不加margin应该是：

紫色main（中间有个绿色maincontainer），橘色left（左），橘色right右，并排。

现在加上负的margin－left，让橘色left（左），向左移动100%的宽度，到达页面左上角，之后，橘色right右将紧挨紫色main，让后我们让橘色right右也向左负margin它自己的宽度，即可实现左右固定宽度布局。中间的绿色，将自适应填充（当然他需要给左面的橘色框让出100px距离）中间布局的margin-right要给右侧溜出right的宽度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航