html - 右浮动元素掉落

Question

在下面的示例中，右侧的 div 下降到左侧下方。需要什么才能防止它掉落？

另请注意，HTML 的顺序不得更改，右侧 div 必须保持 250px，而左侧必须填充剩余空间。

<div id="left">
    Left
</div>    
<div id="right">
    Right
</div>

#left{
    margin-right: 250px;
    background-color: blue;
}
#right{
    float: right;
    width: 250px;
    background-color: orange;
}

http://jsfiddle.net/k1cnt8qt/1/

Answer 1

可以使用CSS表格和表格单元格显示。略有优势的是列将等高，并且不需要明确的修复。

#wrapper {
    display: table;
    width: 100%;
}
#left {
    display: table-cell;
    background-color: blue;
}
#right {
    display: table-cell;
    width: 250px;
    background-color: orange;
}

<div id="wrapper">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

如果您想知道它为什么会掉落，右侧 float 元素将与当前行框的右侧对齐，该行框从左侧 div 下方开始。将右侧 float 的 div 移动到左侧之前也可以。