避免和清除宽自适应布局在ie中产生几像素差异的方法
作者:飘零雾雨 日期:2007-07-24
标题想了半天也想不到一个好的，感觉怎么写怎么长!- -怕是小学时缩句没学好。
今天想说的这个问题应该算是老调重谈了，不过写出来希望会给大家一些帮助，也使我自己不会忘记，毕竟好记性比不上烂笔头。
相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题，我也觉得ie总是让人不断的折腾，可能是怕我们老坐在电脑前不“运动”会滋生出些什么乱七八糟的毛病来：）
先写个在不考虑ie情况下的宽自适应的两栏布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>关于自适应宽度布局在IE中的几像素异常</title>
<style type="text/css">
html,body {
margin:0;
}
#dyhead {
margin-bottom:5px;
}
#dyhead,#dyfoot {
background:#999;
}
#dyleft {
float:left;
width:400px;
height:100px;
background: #666;
}
#dyright {
height:100px;
margin-left:400px;
background: #ccc;
}
#dyfoot {
clear:both;
margin-top:5px;
}
</style>
</head>
<body>
<div id="dyhead">Head</div>
<div id="dyleft">左固定</div>
<div id="dyright">右自适应</div>
<div id="dyfoot">Foot</div>
</body>
</html>
对于两栏布局可能出现的几种情况的思考
作者:飘零雾雨 日期:2007-07-21
对于一直比较受人喜爱的两栏布局，个人认为不外乎以下几种情况，或许会有比较多的细节方面的不同，但都可以在这几种情况内部进行演变。
可能会出现的情况：左栏呈现重要的主体内容，右栏的相对次要；右栏呈现重要的主体内容，左栏相对次要；至于左右两栏同样重要的那种情况，其实也是上面两种情况中的一个特例；如果您还有其他的不同想法，请跟我分享一下：）
以下是两栏布局的XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Doyoe's Layout——两栏布局</title>
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
</head>
<body>
<div id="dyhead"><h1>Head</h1></div>
<div class="dymid">
<div class="dymid_2">优先显示的内容</div>
<div class="dymid_1">次级显示的内容</div>
</div>
<div class="dymid dyborder">可能出现的占据两栏的内容或是banner</div>
<div class="dymid">
<div class="dymid_2">优先显示的内容</div>
<div class="dymid_1">次级显示的内容</div>
</div>
<div id="dyfoot"><h3>Foot</h3><address>Copyright © Doyoe</address></div>
</body>
</html>
第一种情况（右栏呈现重要的主体内容，左栏相对次要）的CSS：
Tags: Layout DY Layout Doyoe Layout 两栏 两栏布局
DIV布局之三行两列右栏宽度固定左栏宽度自适应
作者:飘零雾雨 日期:2007-03-17
和前一篇文章一样，只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定，实现的手法也是大同小异，不过有一个地方需要注意。
那就是在写HTML时，应该把右边的先写，然后再写左边。因为DIV的默认样式是block，每个div都会自动断行。如果先写左边，再写右边的话，因为左边没有float漂浮，右边的会在右部断行；所以编写时，先写右边，再写左边，右边是float的。
［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/2.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;
}
DIV布局之三行两列左栏宽度固定右栏宽度自适应
作者:飘零雾雨 日期:2007-03-13
在用DIV布局时，总会碰到各种各样的问题，有些还非常怪异，总之让人头大。不过当你找到了窍门，你就会把它当作是一门艺术来看待了，真的非常有趣。
现在先来谈谈关于三行两列的布局［左栏固定，右栏自适应宽度］之一，我能想到比较好的办法是使用margin漂浮法。
先说说要做成这件事，要做些什么，会碰到些什么问题。要让右栏自适应宽度，也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某个位置，而且宽度固定呢？很简单，只需要右栏从自身宽度里让出一些给左栏就行了，也就是预留出leftMargin，而右栏仍保持原来的性能自适应。现在就是如何让左栏固定在左边的问题了。大家都知道，让某块居左或居右可以通过float来解决，只需要选择其值为left或right，让该块浮动在某个位置就OK。
