CSS 对齐动态 Div

Question

float 和响应式布局存在一些问题。我有一个 div 容器，里面有一个左右 div 容器。两者必须在同一“行”上，但当 div 容器“RIGHT”设置为 100% 时，它会将其向下移动到下一行。我在这里做了一个快速的 fiddle 。

http://jsfiddle.net/v5tnshjw/1/

<div class="row">
    <div class="leftBox">LEFT</div>
    <div class="rightBox">RIGHT</div>
</div>

.row {
    float: left;
    width: 600px;
    height: auto;
    margin: 0px auto; 
}
.leftBox {
    float: left;
    height: 50px;
    background-color: red;
    width: 80px;
}
.rightBox {
    float: left;
    height: 50px;
    width: 100%;
    background-color: blue;
}

右侧的框需要随浏览器宽度流动但保持在同一行。

任何帮助或指点都会很棒!提前致谢。

Answer 1

您可以将内部 div 设置为 display:table-cell，父级为 display:table 和 table-layout:fixed:

.row {
    float: left;
    width: 600px;
    height: auto;
    margin: 0px auto;
    display:table;
    table-layout:fixed;
}
.leftBox {
    display:table-cell;
    height: 50px;
    background-color: red;
    width: 80px;
}
.rightBox {
    width:100%;
    height: 50px;
    display:table-cell;
    background-color: blue;
}

<div class="row">
    <div class="leftBox">LEFT</div>
    <div class="rightBox">RIGHT</div>
</div>