将div放在另一个div下

-1

我的问题是，如果有人能够帮助我在“settings-div”下定位“container-div”。即使有人会放大，我也希望这会保持在“settings-div”之下。将div放在另一个div下

HTML：

<body> 
    <div class="menu"> 
     <div class="option">Home</div> 
     <div class="option">Media</div> 
     <div class="option">link 3</div> 
     <div class="option">link 4</div> 
     <div class="option">link 5</div> 
     <div class="open"></div> 
     <div class="option" id="settings">Settings</div> 
    </div> 
    <div id="container"> 
     <div class="s-o">Account</div> 
     <div class="s-o">Privacy</div> 
     <div class="s-o">Logout</div> 
    </div> 
</body>

CSS：

html { 
    background-image: url("carbon_background.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cgoogleover; 
} 
body, html { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
} 
.menu { 
    margin-top: 0px; 
    height: 25px; 
    background-color: #3B5998; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-radius: 0px; 
    margin-top: 0px; 
    width: 100%; 
    display: block; 
    top: 0px; 
    left: 0px; 
    margin-top: -8px; 
    margin-left: -8px; 
} 
.menu .option { 
    float: left; 
    width: 15%; 
    text-align: center; 
    background-color: #3B5998; 
    height: 25px; 
    border-radius: 0px; 
    color: white; 
    font-size: 20px; 
    text-decoration: none; 
    list-style-type: none; 
} 
.menu .open { 
    float: left; 
    width: 10%; 
    text-align: center; 
    background-color: #3B5998; 
    height: 25px; 
    border-radius: 0px; 
    text-decoration: none; 
    list-style-type: none; 
} 
.s-o { 
    list-style-type: none; 
    color: white; 
    margin-left: 85%; 
    background-color: #BBBBFF; 
    opacity: 0; 
    width: 15%; 
    margin-top: 0px; 
    text-align: center; 
    font-size: 20px; 
}

Here is a jsFiddle of my current script。

来源

2013-05-29 Bart Koppelmans

你遇到了什么问题，你试图做到这一点？ –

无论何时我放大，它会移动到右边，或者它的3个div移动到另一个。 –

您需要从body元素中删除边距。

body { 
    margin:0; 
}

然后你就可以摆脱menu元素这是导致其不对齐与一切在所有这些奇怪-8px利润率。你也可以摆脱top和left属性，因为他们没有做任何事情。

所以你的菜单类看起来就像这样：

.menu { 
    height: 25px; 
    background-color: #3B5998; 
    border-radius: 0px; 
    width: 100%; 
    display: block; 
}

在这一点上，我觉得你的div容器应完全排队。

下面是更新小提琴：http://jsfiddle.net/cLWeK/1/

来源

2013-05-29 20:12:05

非常感谢你！ –

不客气。如果答案对你有用，你也可以对它进行调整（点击答案顶部的向上箭头）。 –

将div放在另一个div下

回答

相关问题