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 回答