1

写真を含む正方形があり、各写真をクリックしてその人のプロフィールに移動できるはずですが、左上の写真をクリックできません。何が間違っているのかわかりません。

ここに私のjsfiddleがあるので、問題を見ることができます。

<div id = 'crew_div'>
    <div class = 'my_crew'><div id = 'jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div></div>
    <div class = 'my_crew'><div id = 'dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div></div>
    <div class = 'my_crew'><div id = 'james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div></div>
    <div class = 'my_crew'><div id = 'cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div></div>
</div>

#crew_div {
    position:relative;
    width: 312px;
    height:312px;   
}

.my_crew {
    position:absolute;  
}

.my_crew img {
    width:156px;
    display:block;  
}

.my_crew #jason {
    top:0px;
    left:0px;
    position:relative;
}

.my_crew #dharam {
    top:0px;
    left:156px;
    position:relative;
}

.my_crew #james {
    top: 156px;
    left: 0px;  
    position:relative;
}

.my_crew #cody {
    top:156px;
    left:156px;
    position:relative;
}
4

4 に答える 4

2

次のように画像に a を追加z-indexします。

.my_crew #jason {
    top:0px;
    left:0px;
    position:relative;
    z-index: 1;
}
于 2013-02-28T23:00:24.343 に答える
1

隣同士に浮かべてみませんか？これにより、CSS の一部の行も節約されます。

.my_crew {
    float:left;
}

例: http://jsfiddle.net/T5LCm/

于 2013-02-28T23:09:37.587 に答える
1

これがあなたが必要とするものです、私はあなたのHTMLを少し再編成しました:)

新しいフィドル

<div id = 'crew_div'>
<a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><div class = 'my_crew'><div id = 'jason'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></div></div></a>
        <a href = 'http://www.startingtofeelit.com/author/4everevolution/'><div class = 'my_crew'><div id = 'dharam'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></div></div></a>
        <a href='http://www.startingtofeelit.com/author/jjstiles/'><div class = 'my_crew'><div id = 'james'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></div></div></a>
        <a href='http://www.startingtofeelit.com/author/codecray/'><div class = 'my_crew'><div id = 'cody'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></div></div></a>

于 2013-02-28T23:00:10.767 に答える
1

の幅/高さの寸法または上/左の位置が指定されていません<div class="my_crew">。それらはそれぞれ左上に配置され、その子<div>は絶対に配置された親を基準にして配置されます。そのため、左上は実際には他<div>の 3 つの の下に積み上げられているため、クリックできません。

より良い解決策は、2 つ<div>の を 1 つに結合することです。

ここでフィドルを参照してください：http://jsfiddle.net/R4HJb/8/

<div id = 'crew_div'>
    <div class = 'my_crew jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div>
            <div class = 'my_crew dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div>
            <div class = 'my_crew james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div>
            <div class = 'my_crew cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div>
</div>

#crew_div {
    position:relative;
    width: 312px;
    height:312px;   
}

.my_crew {
    position:absolute;  
    width: 156px;
    height: 156px;
}

.my_crew img {
    width:156px;
    display:block;  
}

.my_crew.jason {
    top:0px;
    left:0px;
}

.my_crew.dharam {
    top:0px;
    left:156px;
}

.my_crew.james {
    top: 156px;
    left: 0px;  
}

.my_crew.cody {
    top:156px;
    left:156px;
}
于 2013-02-28T23:29:34.177 に答える