[散分]DIV布局之三行两列右栏宽度固定左栏宽度自适应解决办法
日期：2014-05-17 浏览次数：20555 次
[散分]DIV布局之三行两列右栏宽度固定左栏宽度自适应
今天闲来无事，把以前的一些乱七八糟的东西整理了一下，有些可能有点用处，贴出来大家看看，借此机会散点分，好久没散分了（只接分，貌似不厚道^_^）
『和前一篇文章一样，只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定，实现的手法也是大同小异，不过有一个地方需要注意。
那就是在写HTML时，应该把右边的先写，然后再写左边。因为DIV的默认样式是block，每个div都会自动断行。如果先写左边，再写右边的话，因为左边没有float漂浮，右边的会在右部断行；所以编写时，先写右边，再写左边，右边是float的。
［演示地址：http://pysj.v-ec.com/model/xhtmlcss/layout/layout2.htm］
CSS部分：
body {
font-family: Verdana, Arial;
margin: 0;
font-size: 12px;
}
#dyhead {
margin-bottom: 5px;
}
#dyleft {
margin-right: 210px;
}
#dyright {
float: right;
width: 200px;
}
#dyfoot {
margin-top: 5px;
clear: both;
}
div {
color: #363636;
background-color: #eee;
border: 1px dashed #630;
}
和前一篇文章一样没有什么大的不同，只是#dyleft和#dyright互换了一下，#dyright里面的float值为right，漂浮在右边。
HTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> Css Layout </title>
</head>
<body>
<div id= "dyhead "> 头部 </div>
<div id= "dyright "> 右栏固定 <br /> 宽度为200px </div>
<div id= "dyleft "> 左栏宽度自适应 </div>
<div id= "dyfoot "> 底部 </div>
</body>
</html>
这个布局基本和左栏宽度固定右栏宽度自适应一样，只是从上面可以看出，#dyright写在了#dyleft前面，这里只要注意这一点就可以了^_^祝大家好运。』
------解决方案--------------------
呵呵，不错，支持自适应！接分！
------解决方案--------------------
支持!!
------解决方案--------------------
多谢楼主，最近正在研究这个呢：）
------解决方案--------------------
接分有理
------解决方案--------------------
:)
------解决方案--------------------
JF
------解决方案--------------------
感谢楼主的分享
------解决方案--------------------
up
------解决方案--------------------
up
------解决方案--------------------
up up up
------解决方案--------------------
恩，比较巧妙
------解决方案--------------------
good!
------解决方案--------------------
接!
------解决方案--------------------
接分。。。
------解决方案--------------------
呵呵，该浮动时就浮动。自适应时就适应
------解决方案--------------------
楼主真好啊！
收藏！
一个好人！
今天闲来无事，把以前的一些乱七八糟的东西整理了一下，有些可能有点用处，贴出来大家看看，借此机会散点分，好久没散分了（只接分，貌似不厚道^_^）
『和前一篇文章一样，只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定，实现的手法也是大同小异，不过有一个地方需要注意。
那就是在写HTML时，应该把右边的先写，然后再写左边。因为DIV的默认样式是block，每个div都会自动断行。如果先写左边，再写右边的话，因为左边没有float漂浮，右边的会在右部断行；所以编写时，先写右边，再写左边，右边是float的。
［演示地址：http://pysj.v-ec.com/model/xhtmlcss/layout/layout2.htm］
CSS部分：
body {
font-family: Verdana, Arial;
margin: 0;
font-size: 12px;
}
#dyhead {
margin-bottom: 5px;
}
#dyleft {
margin-right: 210px;
}
#dyright {
float: right;
width: 200px;
}
#dyfoot {
margin-top: 5px;
clear: both;
}
div {
color: #363636;
background-color: #eee;
border: 1px dashed #630;
}
和前一篇文章一样没有什么大的不同，只是#dyleft和#dyright互换了一下，#dyright里面的float值为right，漂浮在右边。
HTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> Css Layout </title>
</head>
<body>
<div id= "dyhead "> 头部 </div>
<div id= "dyright "> 右栏固定 <br /> 宽度为200px </div>
<div id= "dyleft "> 左栏宽度自适应 </div>
<div id= "dyfoot "> 底部 </div>
</body>
</html>
这个布局基本和左栏宽度固定右栏宽度自适应一样，只是从上面可以看出，#dyright写在了#dyleft前面，这里只要注意这一点就可以了^_^祝大家好运。』
------解决方案--------------------
呵呵，不错，支持自适应！接分！
------解决方案--------------------
支持!!
------解决方案--------------------
多谢楼主，最近正在研究这个呢：）
------解决方案--------------------
接分有理
------解决方案--------------------
:)
------解决方案--------------------
JF
------解决方案--------------------
感谢楼主的分享
------解决方案--------------------
up
------解决方案--------------------
up
------解决方案--------------------
up up up
------解决方案--------------------
恩，比较巧妙
------解决方案--------------------
good!
------解决方案--------------------
接!
------解决方案--------------------
接分。。。
------解决方案--------------------
呵呵，该浮动时就浮动。自适应时就适应
------解决方案--------------------
楼主真好啊！
收藏！
一个好人！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
