-3

このレイヤーコンテンツ-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>

直し方？

4

3 に答える 3

2

問題は、＃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に注意してください。これは、要素のfloatをクリアするために使用されます。

今CSS

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

残りのcssは同じままです。お役に立てれば。

はい、私はgappleに同意します。私はあなたのcssをきちんと勉強しなかったと思います。問題を引き起こしているのは「height：103px」です。それを削除すると、そのまま動作します。

しかし、それでもフロートをクリアすることは常に良い考えであることを指摘したいと思います。

于 2012-11-28T18:01:36.563 に答える
0

CSSに以下を追加すると、探している答えが得られるはずです。

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

基本的z-indexに、どの「レイヤー」に住むかを指示します。デフォルトのレイヤーはz-index: 0;

また、それを有効にするには、相対位置または絶対位置を指定する必要があります。

于 2012-11-28T17:57:57.510 に答える
0

よりエレガントな解決策は、ボックスdisplay:inline-blockではなく使用することです。float:left

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

于 2012-11-28T18:06:18.763 に答える