div自适应浏览器

魔术世界中文版 2013-03-28 08:05:38
页面由5部分组成,运行代码后即可看清。现在用的浏览器为IE9,当改变浏览器尺寸后,div#left以及#right部分会明显被挤到屏幕右侧,我希望
1.#left的左端可以始终和#head以及#footer左端对齐
2.#left宽度+#right宽度正好等于#head宽度也就是#right右端正好和#head右端对齐
3.能兼容FF浏览器。目前在FF浏览器下测试,#left和#right整个偏离预定位置。
代码如下:

<head>
<style type="text/css">
#head{
height:130px;
width:1000px;
margin-top:20px;
padding:15px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#login{
height:50px;
width:1000px;
padding:15px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#left{
height:600px;
width:250px;
padding:15px;
margin-left:163px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#right{
height:600px;
width:750px;
padding:10px;
margin-top:-600px;
margin-left:413px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
#footer{
height:130px;
width:1000px;
padding:15px;
background-color:#eeeeee;
border:solid 1px #c3c3c3
}
</style>

</head>
<body>
<form name="form2" method="post" action ="login_check.php">
<center>
<div id="head">这里是head部分</div>
</center>
<center>
<div id="login">
<div id="login1">
用户名:<input type="text" id="user" name="user"/>
密码:<input type="password" id="pass" name="pass"/>
<input type="submit" id="abv" value="登录"/>
</div>
</div>
</center>

<div id="left">
</div>
<div id="right">
</div>

</body>
<center>
<div id="footer">
footer
</div>
<center>
</form>

我的CSS实在很烂,希望大家能给出解决的方法,
...全文
179 点赞 收藏 3
写回复
3 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
引用 1 楼 xzy21com 的回复:
XML/HTML code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w……
多谢
回复
云水千寻 2013-03-28
你的HTML看起来比较乱,用了不适合使用的<center>标签。 1楼改得很漂亮,赞一个!
回复
scscms太阳光 2013-03-28
<!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=utf-8">
    <title>00000</title>
    <style type="text/css">
        body{text-align: center;}
        #out_div{ width:1000px; margin:0 auto;}
        #head{
            height:130px;
            margin-top:20px;
            padding:15px;
        }
        #head,#login,#left,#right,#footer{
            background-color:#eeeeee;
            border:solid 1px #c3c3c3
        }
        #login{
            height:50px;
            padding:15px;
        }
        #left{
            height:600px;
            float: left;
            width:250px;
        }
        #right{
            height:600px;
            float: right;
            width:740px;
        }
        #footer{
            height:130px;clear: both;
            margin-top:15px
        }
    </style>
</head>
<body>
<div id="out_div">
        <div id="head">这里是head部分</div>
        <div id="login">
            <form name="form2" method="post" action="login_check.php">
                用户名:<input type="text" id="user" name="user"/>
                密码:<input type="password" id="pass" name="pass"/>
                <input type="submit" id="abv" value="登录"/>
            </form>
        </div>
    <div id="left">   </div>
    <div id="right">   </div>
    <div id="footer"> footer </div>
</div>
</body>
</html> 
回复
相关推荐
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2013-03-28 08:05
社区公告
暂无公告