为什么这个div不强迫下面的div移动右边？

Question

jsFiddle

我试图将div用作空格div，以便后面的div进一步向右移动。

风格

div.note {float:left;width:60px;  padding:0 0 0 50px;}
#buffer_div {width:150px;}

HTML

<div id="buffer_div"></div>
<div id="note-1" class="note">
    note display here1
</div>
<div id="note-2" class="note">
    note display here2
</div>
<div id="note-3" class="note">
    note display here3
</div>

从jsFiddle可以看出，这不起作用。我做错了什么？

Answer 1

为什么不做以下的事情呢？如果你有尽可能少的标记来实现你的目标，如果你想要做的只是增加一些空间，那么它会有所帮助。

<div id="note-1" class="note">
    note display here1
</div>
<div id="note-2" class="note">
    note display here2
</div>
<div id="note-3" class="note">
    note display here3
</div>

在你的CSS中：

div.note {
    float:left;
    width:60px;
    padding:0 0 0 50px;
}

div#note-1{
    margin-left:150px;
}

如果你想实际使用“#buffer_div”来获得像侧栏这样的内容，你也需要添加一个浮点数。如果你想要一组元素连续显示，那么向所有元素添加一个浮点数没有任何问题。

Answer 2

你的缓冲区div也需要浮动。浮动和非浮动元素不会相互干扰。

Answer 3

你的div是空的，因此没有空间。如果你想要一个左边距，只需删除该div并执行

.note:first-child {margin-left: 150px}

Answer 4

一种更简单的方法（除非有一个非常好的理由为缓冲区div）将使缓冲区div中的所有音符子项，然后将“width”更改为“margin-left”。