初学,如何实现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="text/html; charset=gb2312" />
<style type="text/css">
div{ border:1px solid #000000; width:100px; height:200px;}
#zuobian{ float:left; }
#youbian{ float:right; }
#zhongjian{ width:100px; height:100px; float:left; position:relative;}
</style>
<title>无标题文档</title>
</head><!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="text/html; charset=gb2312" />
<style type="text/css">
div{ border:1px solid #000000; width:100px; height:200px;}
#zuobian{ float:left; }
#youbian{ float:right; position:fixed;}
#zhongjian{ width:100px; height:100px; float:left;}
</style>
<title>无标题文档</title>
</head><body>
<div id="youbian">
左边的
</div><div class="zhongjian">
中间
</div><div id="zuobian">
右边的
</div></body>
</html>请问如何才能实现左中右层的布局呢
左边的贴着浏览器左边
右边的贴着浏览器右边
中间的剧中浏览器

解决方案 »

  1.   

    http://topic.csdn.net/u/20111118/09/3223c2ba-3081-47c0-b224-752c42c3b093.html
      

  2.   

    用dreamwear 去做 你会收获很多
      

  3.   


    <!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="text/html; charset=gb2312" />
        <style type="text/css">
            div
            {
                border: 1px solid #000000;
                width: 100px;
                height: 200px;
            }
            #zuobian
            {
                float: left;
                
            }
            #youbian
            {
                float: right;
                margin:0px;
                
            }
            #zhongjian
            {
                margin:0px auto;
            }
        </style>
        <title>无标题文档</title>
    </head>
    <body>    <div id="zuobian">
            左边的
        </div>
        
        <div id="youbian">
            右边的
        </div>
        <div id="zhongjian">
            中间
        </div>
    </body>
    </html>
      

  4.   

    <!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="text/html; charset=gb2312" />
        <style type="text/css">
            body{margin:0 auto;}
            #divOuter{width:995px;margin:0 auto;}
            #divLeft{width:100px;height:800px;float: left;background-color:Red;}
            #divCenter{width:795px;height:800px;float: left;background-color:blue;}
            #divRight{width:100px;height:800px;float: left;background-color:yellow;}
        </style>
        <title>无标题文档</title>
    </head>
    <body>
        <div id="divOuter">
            <div id="divLeft">
                左边的
            </div>
            <div id="divCenter">
                中间
            </div>
            <div id="divRight">
                右边的
            </div>
        </div>
    </body>
    </html>这个是适应日常最低1024的分辨率的.
    如果你想搞编程, 至少最简单的英语就学一点. 没有人用拼音的.