Question

我有一个div包含绝对位置和左右浮动。现在我想在第一个div下面放置一个图像。

现在的问题是第一个div下方的图像重叠。我希望图像显示在第一个div下方而不重叠。

<div class="top">
    <div class="left" align="center">
        <p><a href="#">Sell</a></p>
        <p><a href="#">Download App</a></p>
        <p><a href="#">24x7 Customer Care</a></p>
    </div>
    <div class="right" align="center">
        <p><a href="#">Track Order</a></p>
        <p><a href="#">Help</a></p>
        <p><a href="#">About</a></p>
        <p><a href="#">Contact</a></p>
    </div>
</div>

<div class="clearfix"></div>

<div class="logo_menu">
    <p><img src="assets/images/logo.png" alt="" title="" /></p>
</div>

.clearfix {
    clear:both;
}
/* Top */
.top {
    width:100%;
    height:auto;
    background:#E9E9E9;
    position:absolute;
    padding:10px;
}
.top .left {
    float:left;
}
.top .left p {
    display:inline-block;
    margin:0 10px 0 10px;
    font-size:12px;
}
.top .left p a {
    text-decoration:none;
    color:#B5B5B5;
}
.top .left p a:hover {
    text-decoration:underline;
    color:#FD6123;
}
.top .right {
    float:right;
}
.top .right p {
    display:inline-block;
    margin:0 10px 0 10px;
    font-size:12px;
}
.top .right p a {
    text-decoration:none;
    color:#B5B5B5;
}
.top .right p a:hover {
    text-decoration:underline;
    color:#FD6123;
}

/* Menu and Logo */
.logo_menu {
    width:100%;
    height:auto;
}

Answer 1

你甚至要对徽标进行绝对定位吗？

绝对定位元素位于主页的“它自己的层”上，所以试图清除花车不会工作。

我的clearfix通常如下所示：

Sub FlagAsSublist(rowNr As Integer)
    Sheet2.Cells(rowNr, 1).Value = ChrW(sublistFlag)
    Debug.Print rowNr
    Sheet2.Range(Cells(rowNr, 4), Cells(rowNr, 11)).Borders(xlInsideVertical).ColorIndex = 2
End Sub

小提琴：https://jsfiddle.net/jv7afgn1/4/

Answer 2

添加填充顶部值等于固定在顶部的导航栏的高度的 Demo

.logo_menu { width:100%; height:auto; padding-top:30px; }

clearfix不适用于绝对位置

2 个答案: