html - 如何阻止一层越过另一层

Question

我有一个图层问题，该图层 content-3f 显示在它下面的所有其他图层上：

<div id="content-3f">
            <div id="content-3-1f"><a href="aboutus.aspx"></a></div>
            <div id="content-3-2f"><a href="experiences.aspx"></a></div>
            <div id="content-3-3f"></div>
        </div>

        <div class="line"><hr class="top" /></div>  

CSS：

    #content-3f {
        float: left;
        width: 880px;
        height: auto;
        padding: 10px 0px 10px 26px;
        height: 103px;
        clear:both;
    }

    #content-3-1f 
    {
        float: left;
        width: 269px;
        height: 202px;
        margin:0px 20px 0px 0px;
        padding: 0px;
        background: url('../images/Guided-tour-logo.png') no-repeat left top;
    }

    #content-3-1f a
    {
        width: 269px;
        height: 202px;
        display:block;
    }

    #content-3-2f 
    {
        float: left;
        width: 269px;
        height: 202px;
        margin:0px 20px 0px 0px;
        padding: 0px;
        background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
    }

    #content-3-2f a
    {
        width: 269px;
        height: 202px;
        display:block;
    }

#content-3-3f 
{
    float: left;
    width: 269px;
    height: 202px;
    margin:0px 0px 0px 0px;
    padding: 0px;
    background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}    

截屏：

如您所见，它越过了<hr>

怎么修？

Answer 1

问题是由于您的#content-3f 上的“float:left”。需要清除浮动才能使其正常工作。这是您的解决方案::

HTML

    <div id="content-3f">
        <div id="content-3-1f"><a href="aboutus.aspx"></a></div>
        <div id="content-3-2f"><a href="experiences.aspx"></a></div>
        <div id="content-3-3f"></div>
    </div>
    <div class="clear"></div>

      <div class="line"><hr class="top" /></div>  ​

请注意带有“clear”类的附加 div，它用于清除元素中的浮动。

现在的 CSS

#content-3f {
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
}
.clear {
clear:both;
}

css 的其余部分保持不变。希望这可以帮助。

是的，我同意gapple。我想我没有正确研究你的CSS。它是造成问题的“高度：103px”。删除它，它就可以正常工作。

但我想指出，尽管如此，清除浮动总是一个好主意。

Answer 2

将以下内容添加到您的 CSS 中应该可以得到您正在寻找的答案。

#content-3-1f, 
#content-3-2f, 
#content-3-3f {
    position:relative;
    z-index: 1;
}

基本上z-index告诉事情要住在哪个“层”上。默认层是z-index: 0;

您还需要指定相对或绝对位置以使其生效。

Answer 3

更优雅的解决方案是使用display:inline-block而不是float:left在您的盒子上。

http://www.vanseodesign.com/css/inline-blocks/