Question

我希望在调整窗口大小时位置元素在彼此之下流动，我有一个标题，随着窗口变小，高度增加。当单击菜单上的元素时显示一个子菜单，菜单将出现在主菜单下，并且在调整窗口大小时它应该粘在标题的底部。

我通过js检测屏幕尺寸并尝试动态更改顶部来尝试解决问题，但是在调整窗口大小时突然显示顶部与顶部不同，它会变成窗口的中心... < / p>

我在这里举一个简单的例子 http://jsfiddle.net/xv8hS/1/

自动高度不适用于此版本！我希望在调整窗口越来越大的时候，绿色条会变成项目栏。

Answer 1

这不是定位，而是浮动问题。在标题（demonstration）中使用空<div>和clear:both：

<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;}

另见：

使位置元素彼此粘在一起

1 个答案: