您的位置：程序门 -> web 开发 -> html（css)



浮动同时改变宽度怎么影响到了相邻绝对定位元素的显示？！


[收藏此页] [打印本页]选择字色：背景色：字体：[大][中][小]


浮动同时改变宽度怎么影响到了相邻绝对定位元素的显示？！
发表于：2007-05-10 22:57:34 楼主
相邻的两个div元素#b和#m，#b设置浮动（无论向左还是向右），#m为绝对定位，当#b的宽度增加到一定值时，#m就会消失。这究竟是什么原因啊？请大家帮忙诊断！代码如下：
<!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 ">
<!--
*   {margin:0px;   padding:0px;}

body   {
height:100%;
}

div{
border:   1px   solid   yellow;
}


#wrap{
background-color:#c0c0c0;
height:100%;
width:750px;
}


#b{
float:right;/*无论是左浮动还是右浮动结果都一样*/
width:745px;/*该内容宽度一超过745像素就导致#m消失*/
height:auto;
background-color:#cd5c5c;
}

#m{
width:20px;
height:10px;
position:absolute;
top:50px;
left:10px;
background:#6ef;
}

-->
</style>
</head>

<body>
<div   id= "wrap ">

<div   id= "b ">
</div>

<div   id= "m ">
</div>
<!--无论#m在#b前还是在#b后都会得到相同后果-->  

</div>
</body>
</html>
发表于：2007-05-11 14:03:141楼 得分:0
<div   id= "b "> 中你用了float:left, <div   id= "m> 跟在后面,他会用左对齐或右对齐的方式跟着,你你的容器,#wrap只有750px,所以不显示了,在#m   上加下clear:both;就ok了,意思清除前面的样式
这下面的代码只在ie6.0试了下,你看看行了不

-------------------------------------------------------------

<!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 ">
<!--
*   {margin:0px;   padding:0px;}

body   {
height:100%;
}

div{
border:   1px   solid   yellow;
}


#wrap{
background-color:#c0c0c0;
height:100%;
width:750px;
}


#b{
float:left;/*无论是左浮动还是右浮动结果都一样*/
width:755px;/*该内容宽度一超过745像素就导致#m消失*/
height:50px;
background-color:#cd5c5c;
}

#m{
clear:both;
width:20px;
height:10px;
position:absolute;
top:50px;
left:10px;
background:#6ef;
display:block;
}

-->
</style>
</head>

<body>
<div   id= "wrap ">

<div   id= "b ">
</div>

<div   id= "m ">
</div>
<!--无论#m在#b前还是在#b后都会得到相同后果-->  

</div>
</body>
</html>

相关文章
其他资讯

快速检索
分类导航标签a

最新资讯
热门点击