CSS实现左中右三栏布局

来源：互联网发布：淘宝美图怎么学编辑：程序博客网时间：2024/04/29 18:16

左右定宽，中间自适应

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的宽度。

0 0