0

すべての画像が div 形状の直接の子孫である場合、最後の画像 6.png が選択される理由がわかりません。ご協力いただきありがとうございます。私が理解していることから、それらはすべて div の直接の子孫であるため、すべての div を選択する必要があります#shape。

<!DOCTYPE html>
<html>
<head>
    <title>3D image</title>
    <style>
    body,html{
        width:100%; 
        height:100%;
        overflow:hidden;
    }

    body{
        background:-webkit-gradient(radial,800 
               64,950, 500, 400, 40, from(#1F1F1F),  to(#FFFFFF));
    }

    #container{
        width:100%;
    }

    #shape{
        position:relative;
        top:160px;
        margin: 0 auto;
        width:200px;
        height:200px;
    }

    #shape > div{
        position:absolute;
        height:200px;
        width:200px;
        border:1px solid #e3e3e3;
        -webkit-border-radius:10px;
    }
</style>
</head>
<body>
<div id="container">
    <div id="shape">
        <div class="one"><a href="http://www.bbc.co.uk/persian"><img src="images/2.png"></a></div>
        <div class="two"><a href="http://www.aljazeera.com"><img src="images/3.png"></a></div>
        <div class="three"><a href="http://www.bbc.co.uk/news"><img src="images/4.png"></a></div>
        <div class="four"><a href="http://www.yahoo.com"><img src="images/1.png"></a></div>
        <div class="five"><a href="http://www.html5nurse.com"><img  src="images/5.png"></a></div>
        <div class="six"><a href="http://www.cnn.com"><img src="images/6.png"></a></div>
    </div>
</div>
</body>
</html>
4

2 に答える 2

3

それらのすべてが選択されます。

それらはすべて同じ位置にあるため、互いに重なり合っています。

于 2013-08-14T09:41:39.607 に答える
0

交換

#shape > div{
    position:absolute;
    height:200px;
    width:200px;
    border:1px solid #e3e3e3;
    -webkit-border-radius:10px;
}

為に

#shape > div{
    position:relative;
    float: left;
    height:200px;
    width:200px;
    border:1px solid #e3e3e3;
    -webkit-border-radius:10px;
}

そして、違いがわかるはずです。

于 2013-08-14T09:45:59.360 に答える