使位置元素相互粘连
使位置元素相互粘连
提问于 2012-03-17 17:33:12
我希望位置元素在调整窗口大小时彼此流动，我有一个标题，随着窗口变小，高度会增加。当单击菜单上的元素时显示一个子菜单，该菜单将出现在主菜单下，并且在调整窗口大小时它应该粘在标题的底部。
我试图通过js检测屏幕大小来解决这个问题，并动态地改变顶部，但在调整窗口大小时，它突然变得不同于它应该是的位置，并且它变成了窗口的中心……
我在这里做了一个简单的例子http://jsfiddle.net/xv8hS/1/
自动高亮在此版本上不起作用！当窗口变得更近更大时，我希望绿色条在项目栏下面。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-03-17 17:43:48
这不是一个定位，而是一个浮动的问题。在标头中使用带有clear:both的空<div> (demonstration)：
<div id="container">
<div id="header">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<div class="clearfix"></div>
</div>
<div id="submenu"></div>
</div>#container{
position:relative;
min-height:300px;
height:auto;
width:100%;
}
#header{
width:100%;
min-height:80px;
height:auto;
background-color:red;
posistion:absolute;
top:0;
right:0;
}
#header ul{
width:100%;
min-height:20px;
height:auto;
}
#header ul li{
min-height:50px;
height:auto;
display:inline-block;
float:left;
width:200px;
}
#submenu{
width:70%;
min-height:20px;
height:auto;
height:5%;
background-color:green;
posistion:absolute;
top:10%;
right:0;
}
.clearfix{clear:both;}另请参阅：
- CSS 2.1: 9.5 Floats
- All About Floats
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9748851
复制相关文章
相似问题
腾讯云开发者
