CSS位置:相对;孩子们不会忽视彼此

Question

我总是使用float。认识到这可能不是最好的办法。尝试使用相对位置。为什么myDiv的孩子们不互相忽视呢?因为它不是inline-block ?

<div class="myDiv">
    <div class="myDiv1"></div>
    <div class="myDiv2"></div>
    <div class="myDiv3"></div>
    <div class="myDiv4"></div>
</div>
.myDiv
{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 100px;
    height: 100px;
    background-color: grey;
}
.myDiv1
{
    background-color: green;
    width: 10px;
    height: 10px;
    position: relative;
    top: 10px;
    left: 10px;
}
.myDiv2
{
    background-color: red;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 30px;
}
.myDiv3
{
    background-color: blue;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 50px;
}
.myDiv4
{
    background-color: yellow;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 70px;
}

http://jsfiddle.net/VLk6m/2/

Answer 1

这是预期的行为。参见MDN文档

在元素没有定位的情况下布局所有元素，然后在不改变布局的情况下调整元素的位置(这样会在元素没有定位的地方留下空白)。

Answer 2

我不太确定你在这里想做什么，但是如果你想让它们都在同一行，你要么需要使用float，要么设置display到inline-block。否则，当它是display: block时，它占据了整个"行"，它不知道你想让它们在同一行。