CSS float 显示不正确

Question

参见 this fiddle .

<div style="width: 200px; position:relative;">
    <div style="float:left; width: 48%; background-color: green;">
        <p>Float1</p>
        <p>expanded</p>
        <p>expanded</p>
    </div>
    <div style="float: right; width:48%; background-color: blue;">
        <p>Float2</p>
        <p>expanded</p>
    </div>
    <div style="float:left; width: 48%; background-color: yellow;">
        <p>Float3</p>
        <p>expanded</p>
    </div>
    <div style="float: right; width: 48%; background-color: gray;">
        <p>Float4</p>
        <p>expanded</p>
    </div>
    <div style="float: left; width: 48%; background-color: red;">
        <p>Float5</p>
    </div>
    <div style="float: right; width: 48%; background-color: cyan;">
        <p>Float6</p>
        <p>expanded</p>
    </div>
    <div style="clear: both; border: none;">
</div>

我想将奇数 block 向左浮动，偶数 block 向右浮动。请注意， block 具有可变高度。这应该是结果:

Float1 Float2
Float3 Float4
Float5 Float6

相反，我将 Float3 元素置于右侧，因为 Float2 比 Float1 短(注意与正确项的错位)。同样的事情发生在左侧显示的 Float6 上。

我做错了什么吗？我该如何解决？

(抱歉我的英语不好)

Answer 1

您需要将每对包含在一个包含的 DIV 中，或者您需要使它们具有相同的高度。