Question

我对浮动div有一个（可能是愚蠢的）问题。我的每个div的大小都是屏幕宽度的一到三分之二（在足够宽的显示屏上）。

如果我有一个短的67％div漂浮左边然后一个高33％的div漂浮然后一个短的67％div漂浮左，我预计第三个div立即排在第一个下面，第二个div继续向下在右边，如http://jsfiddle.net/BluefireAdz/bqdpfv8w/

<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff; ">
    &nbsp;<br />
</div>

然而，某些东西（可能在我的CSS中）正在向下推，因此它只从第二个div的底部开始，就像http://jsfiddle.net/BluefireAdz/9bho8s5b/一样（代码干净，因为我可以轻松地制作它并且仍然具有问题）。

<div class="w67" style="background-color: #aaaa00; ">
    <h1>Title</h1>
</div>
<div class="w67" style="background-color: #aa0000; ">
    <div class="b3_vplayer">
        <div class="embed-container">
            <iframe src="http://www.youtube.com/embed/06olHmcJjS0?autoplay=0&amp;rel=0&amp;theme=light" style="border: 0; "></iframe>
        </div>
    </div>
</div>
<div class="w33" style="background-color: #00aa00; ">
    <img src="http://www.killersites.com0killerSites/resources/dot_clear.gif" alt="Image 1" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
    <img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" alt="Image 2" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
</div>
<div class="w67" style="background-color: #0000aa; ">
    <p>Lorem Ipsum</p>
</div>

尝试过Edge，IE和Firefox并获得相同的结果。

Answer 1

请在此处查看我的更新小提琴：http://jsfiddle.net/9bho8s5b/1/ 基本上我只是在其他div之前带来浮动的右div。

<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
    &nbsp;<br />
</div>

<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff;">
    &nbsp;<br />
</div>

Answer 2

在这个小提琴中更新你的代码

http://jsfiddle.net/9bho8s5b/2/

<强> HTML：

<div style="float:left; width: 67%;">
    <div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aaaa00; color: #ffffff; ">
        &nbsp;<br />
    </div>
    <div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aa0000; color: #ffffff; ">
        &nbsp;<br />
    </div>    
</div>

你可以将前两个div包装在另一个宽度为67％且内部div占全宽度的div中。

Answer 3

您可以更改HTML，以便首先显示设置为float:right的div，然后显示3 float:left。

这是fiddle。

Answer 4

解决了 - 我实际上并没有将w33 div漂浮到右边！已将float: right添加到内联样式中，现在它们都按预期浮动！

浮动的div意外地清除了之前的浮动

4 个答案: