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表格和表格单元格显示。轻微的优点是列的高度相同，无需明确修复。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

由于#left没有被浮动，它已经突破了下一行。

#left {
    float: left;
    /* rest of css */
}

那就是说，你希望它占用整个空间，所以你实际上想要这里的列。试试这个：

Fiddle

HTML

<div class="table">
    <div class="row">
        <div class="left">
            Left - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor vestibulum accumsan. Nulla efficitur blandit imperdiet. Nunc in ante dolor. Duis malesuada aliquam eros non vestibulum. Quisque justo lorem, convallis a ante vel, placerat aliquam quam. Fusce sed erat rutrum, consectetur risus a, mollis lacus. Pellentesque finibus metus at arcu gravida tempor
        </div>    
        <div class="right">
            Right
        </div>
    </div>
</div>

CSS

.table {
    display: table;
}
.row {
    display:table-row;
}
.left{
    display: table-cell;
    background-color: blue;

}
.right{
    display:table-cell;
    width:250px;
    background-color: orange;
}

这可以避免负边距，并且很容易适应您可能进行的任何更改。

Answer 3

#left{

    float:left;
    background-color: blue;
    width:100%;
    margin-right:-250px;    


}
#right{

    float: right;
    width: 250px;
    background-color: orange;

}

FIDDLE：http://jsfiddle.net/k1cnt8qt/12/

Answer 4

左侧div没有设置宽度，因此它延伸100％并在同一条线上应用右边距，使其内部宽度更小，但外部仍然是100％。如果CSS中没有指定，则非浮动元素的宽度为100％（宽度，浮点数，显示内联/内联块）。

Answer 5

只需交换左右divs

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

http://jsfiddle.net/k1cnt8qt/3/

Answer 6

您可以通过以下方式执行此操作：

#left{

    background-color: blue;
    float:left;
    width:calc(100% - 250px);

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

http://jsfiddle.net/k1cnt8qt/13/

Answer 7

＆＃13;

#left {
    background-color : blue;
    display : inline-block;
    width : 250px;
    padding-left : 5px;
}

#right {
    background-color : orange;
    display : inline-block;
    width : 250px;
    padding-left : 5px;
}

＆＃13;

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

＆＃13;

右浮动元素下降

7 个答案: