Question

我的问题是，如果有人可以帮我定位“settings-div”下的“container-div”。即使有人放大，我也希望它能保持在“settings-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

Answer 1

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

body {
  margin:0;
}

然后你可以摆脱-8px元素上所有那些奇怪的menu边距，导致它与其他所有元素不一致。您也可以删除top和left属性，因为它们没有做任何事情。

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

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

此时，我认为你的容器div应该完美排列。

这是更新的小提琴：http://jsfiddle.net/cLWeK/1/

将div放在另一个div下面

1 个答案: