关于div css 中的 float 浮动问题，为什么margin-left属性在 IE和 火狐中显示不出来
我要实现这种效果<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><titl...
我要实现这种效果
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ font:"宋体"; font-size:13px; color:#333333;}
#layout{ width:1000px; padding:0px; margin:0px auto; border:#dcdcdc 1px solid;}
#head{ height:140px; padding:10px; margin:0px; background: #FFFF99;}
#content{ width:980px; padding:10px ; margin:5px 0px;; background:#FF6633; position:relative; overflow: hidden;}
#foot{ width:1000px; padding:0px; margin:0px; height:50px; background: #33CC66;}
#sidemain{ float:left; width:190px; padding:0px; margin:0px; border:#000099 1px dashed; background:#0099CC;}
#main{ float:right; width:776px; padding:0px; margin:0px; border:#ff0000 1px dashed; background:#FF9900;}
</style>
</head>
<body>
<div id="layout">
<div id="head"></div>
<div id="content">
<div id="sidemain">
<p>1111</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>111</p>
<p>1</p>
<p>1</p>
</div>
<div id="main">
<p>22222</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
但是我用的是另外一种写法，这种写法只能在遨游中正确显示，请问是怎么回事 怎么修改：代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ font:"宋体"; font-size:13px; color:#333333;}
#layout{ width:1000px; padding:0px; margin:0px auto; border:#dcdcdc 1px solid;}
#head{ height:140px; padding:10px; margin:0px; background: #FFFF99;}
#content{ width:980px; padding:10px; margin:5px 0px;; background:#FF6633; position:relative; overflow: hidden;}
#foot{ width:1000px; padding:0px; margin:0px; height:50px; background: #33CC66;}
#sidemain{ float:left; width:200px; padding:0px; margin:0px; border:#000099 1px dashed; background:#0099CC;}
#main{ margin-left:0px 0px 0px 220px; width:780px; padding:0px; border:#ff0000 1px dashed; background:#FF9900;}
</style>
</head>
<body>
<div id="layout">
<div id="head"></div>
<div id="content">
<div id="sidemain">
<p>1111</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>111</p>
<p>1</p>
<p>1</p>
</div>
<div id="main">
<p>22222</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
请详细讲解一下，好的有加分 40分
margin-left:这是我写错了，但是按照margin-left：220px； 在遨游中 #main是另起了一行，跟sidemain不在一个行里面，我要问的是这个问题 怎么解决呢？
晕 原来是宽度超出了 但是为什么 IE和ff能够正常显示在一行呢？这也是我没有检查宽度有没有超出的原因 展开
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ font:"宋体"; font-size:13px; color:#333333;}
#layout{ width:1000px; padding:0px; margin:0px auto; border:#dcdcdc 1px solid;}
#head{ height:140px; padding:10px; margin:0px; background: #FFFF99;}
#content{ width:980px; padding:10px ; margin:5px 0px;; background:#FF6633; position:relative; overflow: hidden;}
#foot{ width:1000px; padding:0px; margin:0px; height:50px; background: #33CC66;}
#sidemain{ float:left; width:190px; padding:0px; margin:0px; border:#000099 1px dashed; background:#0099CC;}
#main{ float:right; width:776px; padding:0px; margin:0px; border:#ff0000 1px dashed; background:#FF9900;}
</style>
</head>
<body>
<div id="layout">
<div id="head"></div>
<div id="content">
<div id="sidemain">
<p>1111</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>111</p>
<p>1</p>
<p>1</p>
</div>
<div id="main">
<p>22222</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
但是我用的是另外一种写法，这种写法只能在遨游中正确显示，请问是怎么回事 怎么修改：代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ font:"宋体"; font-size:13px; color:#333333;}
#layout{ width:1000px; padding:0px; margin:0px auto; border:#dcdcdc 1px solid;}
#head{ height:140px; padding:10px; margin:0px; background: #FFFF99;}
#content{ width:980px; padding:10px; margin:5px 0px;; background:#FF6633; position:relative; overflow: hidden;}
#foot{ width:1000px; padding:0px; margin:0px; height:50px; background: #33CC66;}
#sidemain{ float:left; width:200px; padding:0px; margin:0px; border:#000099 1px dashed; background:#0099CC;}
#main{ margin-left:0px 0px 0px 220px; width:780px; padding:0px; border:#ff0000 1px dashed; background:#FF9900;}
</style>
</head>
<body>
<div id="layout">
<div id="head"></div>
<div id="content">
<div id="sidemain">
<p>1111</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>111</p>
<p>1</p>
<p>1</p>
</div>
<div id="main">
<p>22222</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
请详细讲解一下，好的有加分 40分
margin-left:这是我写错了，但是按照margin-left：220px； 在遨游中 #main是另起了一行，跟sidemain不在一个行里面，我要问的是这个问题 怎么解决呢？
晕 原来是宽度超出了 但是为什么 IE和ff能够正常显示在一行呢？这也是我没有检查宽度有没有超出的原因 展开
6个回答
展开全部
1. 第二部分中这一段，#main{ margin-left:0px 0px 0px 220px; width:780px; padding:0px; border:#ff0000 1px dashed; background:#FF9900;}
margin-left这里，直接写"margin-left:220px;"就可以了吧。
2. 两部分不在同一行的原因是sidemain和main的盒宽度超过content宽度。
3. 如果你是修改的第二部分代码，那么main在傲游下应该也不会分行，我不太清楚傲游现在采用的是哪个的内核，但既然IE和FF都不分行显示，傲游……之所以分行可能是因为你把两部分代码混杂了，把“float:right”加入到了第二部分的#main中。
还有，能不能采取追问的形式？
margin-left这里，直接写"margin-left:220px;"就可以了吧。
2. 两部分不在同一行的原因是sidemain和main的盒宽度超过content宽度。
3. 如果你是修改的第二部分代码，那么main在傲游下应该也不会分行，我不太清楚傲游现在采用的是哪个的内核，但既然IE和FF都不分行显示，傲游……之所以分行可能是因为你把两部分代码混杂了，把“float:right”加入到了第二部分的#main中。
还有，能不能采取追问的形式？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这也是浏览器的兼容性问题，同在一行的元素最好还是都加上float:left;或float:right
否则有时还会遇上ie6的3像素bug
你可以加上#content{overflow:hidden} 再给定高
这样有溢出的话，那些元素就不会乱跑了
否则有时还会遇上ie6的3像素bug
你可以加上#content{overflow:hidden} 再给定高
这样有溢出的话，那些元素就不会乱跑了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
晕死，你这代码写的。看不出问题出在哪里？
给你解释一下，sidemain和main都被content包含
1、content的宽度是980px 那么他所包含的内容宽度相加不能超过980px
2、sidemain的宽度是200px 不过它还有一个边框的宽度啊，上右下左各为1px；所以sidemain的实际宽度为202px
3、main的宽度为780px 有一个边框，在加2个像素，还有一个左间距，在加220px ；所以main的实际占用宽度为780+2+220=1002px
4、如果你想让sidemain与main在一行排列，那么他们的总宽度为202+1002=1204px 不过他们的父层content的宽度为980px 你说他们能在一行显示么？
你把html代码最上面的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
删除了，不进行w3c标准验证了，你把它加上你在看
给你解释一下，sidemain和main都被content包含
1、content的宽度是980px 那么他所包含的内容宽度相加不能超过980px
2、sidemain的宽度是200px 不过它还有一个边框的宽度啊，上右下左各为1px；所以sidemain的实际宽度为202px
3、main的宽度为780px 有一个边框，在加2个像素，还有一个左间距，在加220px ；所以main的实际占用宽度为780+2+220=1002px
4、如果你想让sidemain与main在一行排列，那么他们的总宽度为202+1002=1204px 不过他们的父层content的宽度为980px 你说他们能在一行显示么？
你把html代码最上面的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
删除了，不进行w3c标准验证了，你把它加上你在看
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0px; font-family:"宋体"; font-size:13px; color:#333333;}
#layout{ width:1000px; height:535px; border:#dcdcdc 1px solid; margin:0px auto;}
#head{ height:140px; padding:10px; margin:0px; background: #FFFF99; width:980px !important; width:1000px;}
#content{ padding:10px; margin:5px 0px; background:#FF6633; height:295px; width:980px !important; width:1000px;}
#foot{ width:1000px; padding:0px; margin:0px; height:50px; background: #33CC66;}
#sidemain{ float:left; width:200px; border:#000099 1px dashed; background:#0099CC;}
#main{ margin-left:10px; width:765px; padding:0px; border:#ff0000 1px dashed; background:#FF9900; float:right; display:inline;}
</style>
</head>
<body>
<div id="layout">
<div id="head"></div>
<div id="content">
<div id="sidemain">
<p>1111</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>111</p>
<p>1</p>
<p>1</p>
</div>
<div id="main">
<p>22222</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0px; font-family:"宋体"; font-size:13px; color:#333333;}
#layout{ width:1000px; height:535px; border:#dcdcdc 1px solid; margin:0px auto;}
#head{ height:140px; padding:10px; margin:0px; background: #FFFF99; width:980px !important; width:1000px;}
#content{ padding:10px; margin:5px 0px; background:#FF6633; height:295px; width:980px !important; width:1000px;}
#foot{ width:1000px; padding:0px; margin:0px; height:50px; background: #33CC66;}
#sidemain{ float:left; width:200px; border:#000099 1px dashed; background:#0099CC;}
#main{ margin-left:10px; width:765px; padding:0px; border:#ff0000 1px dashed; background:#FF9900; float:right; display:inline;}
</style>
</head>
<body>
<div id="layout">
<div id="head"></div>
<div id="content">
<div id="sidemain">
<p>1111</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>111</p>
<p>1</p>
<p>1</p>
</div>
<div id="main">
<p>22222</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
margin-left:0px 0px 0px 220px;
这里写错了 改了就好了
这里写错了 改了就好了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
