Question

我总是用漂浮物。认识到它可能不是最佳方式。尝试与位置相关。为什么myDiv的孩子不要忽视对方的顶级？因为它不是内联块？

<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

这是预期的行为。 See the MDN documentation

布置所有元素，就好像元素没有定位一样，然后调整元素的位置，而不改变布局（从而为元素留下一个间隙，如果它没有被定位）。

Answer 2

我不确定你在这里要做什么，但是如果你想让它们都在同一行，你需要使用float或将display设置为{{1 }}。否则，当它为inline-block时，它会占用整个“行”，并且它不知道您希望它们位于同一行。

CSS位置：相对;孩子们不要互相忽视

2 个答案: