三列布局技巧-优快云博客

本文介绍了三种实现三列布局的方法：绝对定位法、margin负值法及自身浮动法，并提供了具体的HTML和CSS代码示例，帮助读者更好地理解和应用这些布局技巧。

三列布局

http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/张鑫旭的博客

两列布局

<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
    <style type="text/css">
        #left
        {
            width:100px;height:100px;background-color:#ccc;border:2px solid #333;
            float:left;
        }
        #right
        {height:300px;margin-left:104px; border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
        }
    </style>
</head>
<body>
<div id="left"> left </div>
<div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div>
</body>
</html>

第二种

<!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>
    <style type="text/css">
        #sidebar
        {width:100px;height:100px;float:left;background-color:#cccccc;border:2px solid #333333;}
        #Wrap
        {position:absolute;left:113px;right:0px;height:300px;border:2px solid #333333;
            background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
        #floatSpan {float:right;}
        /*for ie6*/
    </style>
</head>
<body>
<div id="sidebar"> left </div>
<div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /> <span id="floatSpan"><span>
</div>
</body>
</html>