將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下

回答

相關問題