Question

我已经尝试了很多东西来解决这个问题。我似乎无法在父div中获得嵌套div而不必使用margin。我试图以常规方式获取它，父级为position:relative，嵌套为position:absolute。它没有用，有人知道为什么吗？

HTML

<div class="header">
    <div class="logo">
        <img src="/images/logo.png" width="96" height="82">
    </div> 
    <div id="nav">
        <a href="$HOME_PAGE_LINK$">Portfolio</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <div id="headerPro">
    </div>
</div>

CSS

.header {
    position:relative;
    background-color: #2C2E31;
    border-bottom: #242426 2px solid;
    height: 182px;
}
.logo {
    text-align: center; 
    padding-top: 35px;
}
#nav {
    position:absolute;
    bottom: 0;
    width: 100%;
    text-align:center; 
    text-decoration:none; 
    font-size:20px;
    font-family:raleway-regular; 
}
#nav a {
    border-bottom:#FFFFFF 2px solid; 
    color:#FFFFFF;
    text-decoration:none; 
    margin-left: 8px; 
    margin-right:8px;
}
#headerPro {
    position:absolute;
    float:right;
    width:100px;
    height:100px;
    background-color:red;
}

Answer 1

看到这个小提琴

Example

我做了两个更改，添加了一个浮点数：左边是徽标css：

.logo {
   float:left;
}

并从标题pro css

中删除了position：absolute

由于徽标div，你的div正在标题栏之外流动，如果你向左浮动（正如我在小提琴中所做的那样），红色Div将会向上移动。

如果您可以准确地解释您希望#HeaderPro div的位置，那将会有所帮助。

Answer 2

很难说出你想要它的样子，但也许我说得对你好：

我修改了您的HTML代码，使用ul作为导航，这是最佳做法：

<div class="header">
    <div class="logo">
        <img src="/images/logo.png" alt="logo"/>
    </div> 
    <ul id="nav">
        <li><a href="$HOME_PAGE_LINK$">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div id="headerPro">
    </div>
</div>

这样你的css代码就像这样：

.logo > img {
    display: inline-block;
    width: 96px;
    height: 82px;
}

#nav {
    position:absolute;
    list-style-type: none;
    bottom: 0;
    width: 100%;
    text-align:center; 
    text-decoration:none; 
    font-size:20px;
    font-family:raleway-regular; 
}

#nav > li {
    display: inline;
}

#headerPro {
    position:absolute;
    top: 35px; /* assuming you want this to line up with the logo */
    right: 0;
    width:100px;
    height:100px;
    background-color:red;
}

Here is a demo

Answer 3

显然，浏览器将你的div＃headerPro放在上一个（兄弟）div的下方。如果您希望它成为父div的一部分，请添加top：2％以将红色div放置在黑色div的右上角。

#headerPro {
 position:absolute;
 float:right;
 width:100px;
 height:100px;
 background-color:red;
 top: 1%;
}

定位和浮动不起作用？

3 个答案: