-1

我的问题是是否有人可以帮助我将“container-div”定位在“settings-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;
}

这是我当前脚本的 jsFiddle。

4

1 回答 1

1

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

body {
  margin:0;
}

然后你可以去掉元素上所有那些导致它与其他所有东西不对齐的奇怪-8px边距。menu你也可以去掉topandleft属性，因为它们什么都不做。

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

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

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

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

于 2013-05-29T20:12:05.633 回答