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实在很烂，希望大家能给出解决的方法，

...全文

226 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

魔术世界中文版 2013-03-28

打赏
举报

引用 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>