CSS對齊動態分區

Question

浮動和響應式佈局有一點問題。我有一個div容器，裏面有一個左右div容器。這兩個必須在同一個「行」，但是當div容器「RIGHT」設置爲100％時，它將它移動到下一行。我在這裏做了一個小提琴。

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

你可以爲display:table和table-layout:fixed與父集內的div到display:table-cell：

.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>

Answer 2

如果左框還需要擴展：

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

Answer 3

你也可以使用CSS3 calc() function：

.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: calc(100% - 80px); 
 
    background-color: blue; 
 
}

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