0

我已经尝试了很多方法来解决这个问题。我似乎无法在不使用边距的情况下获得父 div 内的嵌套 div。我正在尝试以常规方式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;
}
4

3 回答 3

1

看到这个小提琴

例子

我做了两个更改，在徽标 css 中添加了一个 float:left：

.logo {
   float:left;
}

并从标题 pro css 中删除了 position:absolute

由于徽标 div，您的 div 在标题块之外流动，如果您使该浮动向左（就像我在小提琴中所做的那样），红色 Div 将向上移动。

如果您能准确地解释您想要#HeaderPro div 的位置，这将有所帮助。

于 2013-05-23T13:13:50.230 回答
1

很难说你到底想要它是什么样子，但也许我猜对了：

我修改了您的 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;
}

这是一个演示。

于 2013-05-23T13:16:48.130 回答
0

显然，浏览器将您的 div#headerPro 定位在前一个（兄弟）div 的下方。如果您希望它成为父 div 的一部分，请添加 top:2% 以将红色 div 定位在黑色 div 的右上角。

#headerPro {
 position:absolute;
 float:right;
 width:100px;
 height:100px;
 background-color:red;
 top: 1%;
}
于 2013-05-23T13:20:33.717 回答