当前位置：首页 → 问答吧 → 初学,如何实现div布局

初学,如何实现div布局

时间：2011-11-18

来源：互联网

<!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>

请问如何才能实现左中右层的布局呢
左边的贴着浏览器左边
右边的贴着浏览器右边
中间的剧中浏览器

作者: jcm294787732 发布时间: 2011-11-18

引用楼主 jcm294787732 的回复:
<!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="Conten……

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

作者: p2227 发布时间: 2011-11-18

不是一个层里面的是分开的像广告那种。贴在浏览器左右

作者: jcm294787732 发布时间: 2011-11-18

用dreamwear 去做你会收获很多

作者: dreamboom 发布时间: 2011-11-18

引用 2 楼 jcm294787732 的回复:

不是一个层里面的是分开的像广告那种。贴在浏览器左右

那本页面就是了，你直接分析就好

作者: p2227 发布时间: 2011-11-18

引用 3 楼 dreamboom 的回复:

用dreamwear 去做你会收获很多

我是用dreamwear作的

作者: jcm294787732 发布时间: 2011-11-18

HTML code


<!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>

作者: zsx841021 发布时间: 2011-11-18

初学,如何实现div布局

热门阅读

热门下载