浮动混淆

为什么此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

回答

相关问题