這個div爲什麼不強制下面的div移動右邊？

我想使用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看，這是行不通的。我究竟做錯了什麼？

來源

2011-02-24 ben

爲什麼你不做類似下面的事情。如果你有儘可能少的標記來實現你的目標，並且如果你想要做的就是增加一些空間，保證金就會很好。

<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」有可能像一個側邊欄的某些內容，您將需要一個浮動添加到這一點。如果你想要一組元素連續顯示，向所有元素添加一個float值沒有任何問題。

來源

2011-02-24 11:13:24 Sam152

這就是我目前正在做的，但我想找到另一種方式，因爲我在頁面上做了一些ajaxy的東西，第一個音符會動態改變。 – ben 2011-02-24 11:17:34

這是最簡單的方法 – cjk 2011-02-24 11:17:44

我嘗試添加float-jsfiddle.net/PsQBD/12，但我不認爲自己做得對，因爲它仍然不能正常工作？ – ben 2011-02-24 11:19:59

你的buffer div也需要浮動。浮動和非浮動元素不會相互干擾。

來源

2011-02-24 11:11:53 cjk

我試過這樣做 - http://jsfiddle.net/PsQBD/12/ - 但它仍然不起作用？ – ben 2011-02-24 11:16:47

@ben，div沒有內容，所以它沒有被渲染。 – Sam152 2011-02-24 11:20:49

div需要一些填充內容，例如非破壞性空間（' '）或它需要一個高度（在CSS中，例如：'height：1px'） – Daan 2011-02-24 11:21:50

你的div是空的，因此它沒有空間。如果你想有一個左間距只是刪除該分區，並做

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

來源

2011-02-24 11:15:27 Andrea

一個簡單的方法（除非有很好的理由緩衝區格）會做緩衝的div所有的筆記孩子再將「寬度」更改爲「保留餘量」。

來源

2011-02-24 11:17:56 Trezoid

這個div爲什麼不強制下面的div移動右邊？

回答

相關問題