[散分]DIV布局之三行两列左栏宽度固定右栏宽度自适应解决方法
日期：2014-05-17 浏览次数：20691 次
[散分]DIV布局之三行两列左栏宽度固定右栏宽度自适应
今天闲来无事，把以前的一些乱七八糟的东西整理了一下，有些可能有点用处，贴出来大家看看，借此机会散点分，好久没散分了（只接分，貌似不厚道^_^）
『在用DIV布局时，总会碰到各种各样的问题，有些还非常怪异，总之让人头大。不过当你找到了窍门，你就会把它当作是一门艺术来看待了，真的非常有趣。
现在先来谈谈关于三行两列的布局［左栏固定，右栏自适应宽度］之一，我能想到比较好的办法是使用margin漂浮法。
先说说要做成这件事，要做些什么，会碰到些什么问题。要让右栏自适应宽度，也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某个位置，而且宽度固定呢？很简单，只需要右栏从自身宽度里让出一些给左栏就行了，也就是预留出leftMargin，而右栏仍保持原来的性能自适应。现在就是如何让左栏固定在左边的问题了。大家都知道，让某块居左或居右可以通过float来解决，只需要选择其值为left或right，让该块浮动在某个位置就OK。
［演示地址：http://pysj.v-ec.com/model/xhtmlcss/layout/layout1.htm］
CSS部分：
body {
font-family: Verdana, Arial;
font-size: 12px;
margin: 0;
}
#dyhead {
margin-bottom: 5px;
}
#dyleft {
width: 200px;
float: left;
}
#dyright {
margin-left: 210px;
}
#dyfoot {
margin-top: 5px;
clear: both;
}
div {
color: #363636;
background-color: #eee;
border: 1px dashed #630;
}
以上的样式中，body没什么说，基本的一些定义；div总体的定义了一下所有div的背景色及边框样式；#dyhead定义头部以5px的间距和下面的内容分开；#dyfoot则和#dyhead相反，以5px的间距和上面的内容分开，只不过这里多用了一个clear，用于清除上面内容中使用float的影响；#dyleft定义了自身的宽，而且定义了float为left，就是为了使自己始终浮在左边；#dyright一目了然，margin-left为左栏预留了210px的空间，反观#dyleft只用了200px定义自身，剩下的10px自然就成了两栏之间的间距了。
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= "dyleft "> 左栏固定 <br /> 宽度为200px </div>
<div id= "dyright "> 右栏宽度自适应 </div>
<div id= "dyfoot "> 底部 </div>
</body>
</html>
以上就是使用margin漂浮法作出的［左栏固定，右栏自适应宽度］布局，为了区分开左右的位置，我预留了两栏之间的间隔为10px，当然这在真正做web的时候为了美观也是要的。在效果演示页面能看到，或者直接把以上代码拷到本地也行。整个布局十分简单，思路也比较清晰，希望有更好意见的朋友多多交流。
*题外话：其实这个布局不需要用到margin漂浮，一样能很简单的实现。步骤：左栏依然如此，右栏不需要任何设定，效果依然为“左栏固定，右栏自适应宽度”。只是考虑到后面更复杂的东西，这样的表现会不大完美。就如，要清晰分开两栏就不易。』
------解决方案--------------------
不错，继续努力！接分！ ^_^
------解决方案--------------------
不错，收藏了
------解决方案--------------------
好
------解决方案--------------------
接分
------解决方案--------------------
多谢楼主，最近正在研究这个呢：）
------解决方案--------------------
接分有理
------解决方案--------------------
收下了....谢了啊
------解决方案--------------------
顶
------解决方案--------------------
:)
------解决方案--------------------
JF
------解决方案--------------------
感谢楼主的分享
------解决方案--------------------
今天闲来无事，把以前的一些乱七八糟的东西整理了一下，有些可能有点用处，贴出来大家看看，借此机会散点分，好久没散分了（只接分，貌似不厚道^_^）
『在用DIV布局时，总会碰到各种各样的问题，有些还非常怪异，总之让人头大。不过当你找到了窍门，你就会把它当作是一门艺术来看待了，真的非常有趣。
现在先来谈谈关于三行两列的布局［左栏固定，右栏自适应宽度］之一，我能想到比较好的办法是使用margin漂浮法。
先说说要做成这件事，要做些什么，会碰到些什么问题。要让右栏自适应宽度，也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某个位置，而且宽度固定呢？很简单，只需要右栏从自身宽度里让出一些给左栏就行了，也就是预留出leftMargin，而右栏仍保持原来的性能自适应。现在就是如何让左栏固定在左边的问题了。大家都知道，让某块居左或居右可以通过float来解决，只需要选择其值为left或right，让该块浮动在某个位置就OK。
［演示地址：http://pysj.v-ec.com/model/xhtmlcss/layout/layout1.htm］
CSS部分：
body {
font-family: Verdana, Arial;
font-size: 12px;
margin: 0;
}
#dyhead {
margin-bottom: 5px;
}
#dyleft {
width: 200px;
float: left;
}
#dyright {
margin-left: 210px;
}
#dyfoot {
margin-top: 5px;
clear: both;
}
div {
color: #363636;
background-color: #eee;
border: 1px dashed #630;
}
以上的样式中，body没什么说，基本的一些定义；div总体的定义了一下所有div的背景色及边框样式；#dyhead定义头部以5px的间距和下面的内容分开；#dyfoot则和#dyhead相反，以5px的间距和上面的内容分开，只不过这里多用了一个clear，用于清除上面内容中使用float的影响；#dyleft定义了自身的宽，而且定义了float为left，就是为了使自己始终浮在左边；#dyright一目了然，margin-left为左栏预留了210px的空间，反观#dyleft只用了200px定义自身，剩下的10px自然就成了两栏之间的间距了。
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= "dyleft "> 左栏固定 <br /> 宽度为200px </div>
<div id= "dyright "> 右栏宽度自适应 </div>
<div id= "dyfoot "> 底部 </div>
</body>
</html>
以上就是使用margin漂浮法作出的［左栏固定，右栏自适应宽度］布局，为了区分开左右的位置，我预留了两栏之间的间隔为10px，当然这在真正做web的时候为了美观也是要的。在效果演示页面能看到，或者直接把以上代码拷到本地也行。整个布局十分简单，思路也比较清晰，希望有更好意见的朋友多多交流。
*题外话：其实这个布局不需要用到margin漂浮，一样能很简单的实现。步骤：左栏依然如此，右栏不需要任何设定，效果依然为“左栏固定，右栏自适应宽度”。只是考虑到后面更复杂的东西，这样的表现会不大完美。就如，要清晰分开两栏就不易。』
------解决方案--------------------
不错，继续努力！接分！ ^_^
------解决方案--------------------
不错，收藏了
------解决方案--------------------
好
------解决方案--------------------
接分
------解决方案--------------------
多谢楼主，最近正在研究这个呢：）
------解决方案--------------------
接分有理
------解决方案--------------------
收下了....谢了啊
------解决方案--------------------
顶
------解决方案--------------------
:)
------解决方案--------------------
JF
------解决方案--------------------
感谢楼主的分享
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
