浮動混淆

爲什麼此fiddle中的橙色框不會左移至其餘框中？我確信這個橙色盒子是假設被從流出物中取出並漂浮在藍色盒子旁邊的。我錯過了什麼？浮動混淆

<div class=" wrap clear"> 
     <div class="block pink float"></div> 
     <div class="block blue float"></div> 
     <div class="block green"></div> 
     <div class="block orange float"></div> 
    </div>

來源

2013-02-27 Brandon Dorsey

您可以在此處發佈CSS嗎？ – 2013-02-27 06:34:57

@JanDvorak我試圖發佈css，但由於某種原因，它讓我格式正確。 – 2013-02-27 06:45:30

只是複製並粘貼css，然後突出顯示它，然後輸入ctrl（或命令）+ k – abbood 2013-02-27 08:31:45

Working Fiddle

div默認塊的其他元件是並排但這種行爲可以通過使用CSS被改變。如果你想讓你的橙色盒子變成藍色，那麼你可以改變你的安排。所以，綠色div不能推橙色的。任何將放置在綠色之後的div將在下一行。

來源

2013-02-27 06:36:43

但是浮動元素也是塊元素。 – BoltClock 2013-02-27 06:38:17

@JanDvorak你想說什麼？ – 2013-02-27 06:38:21

我剛開始學習html/css，剛纔發現了小提琴。 – 2013-02-27 06:38:30

這是因爲你沒有漂浮綠色的盒子。所以綠色方塊顯示塊級別並按下橙色方塊。

來源

2013-02-27 06:34:47 Rob

但浮動元素也是塊元素，所以所有框都顯示爲塊。 – BoltClock 2013-02-27 06:38:27

現在更換到你的HTML代碼，這樣Live Demo --------- Full Demo

<div class=" wrap clear"> 
      <div class="block pink float"></div> 
      <div class="block blue float"></div> 

      <div class="block orange float"></div> 

    <div class="block green"></div> 
     </div>

Demo

來源

2013-02-27 06:38:54

看到此鏈接我希望這將幫助你。 jsfiddle.net/GBdDU/5/

來源

2013-02-27 06:43:52

所有塊級元素都坐在自己的行上，並且不允許任何其他元素坐在它們的左側或右側。儘管元素被浮動並且被視爲塊級別，但它已從正常頁面流中移除，不再坐在自己的行上。在浮動元素旁邊放置塊級元素的快速解決方案是在所需元素中添加以下css規則：

.Whatever { 
    display: inline-block; 
}

來源

2013-02-27 09:39:28

回答

相關問題