CSS выравнивание динамического Div

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

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

You также можно использовать 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>