Выровнять два divs бок о бок?

Question

Как выровнять два элемента div бок о бок, указывая ширину только правого div? Я хочу, чтобы правый div имел фиксированную ширину, а левый div - оставшееся пространство.

<div style="width:100%;"><div class="left">left div</div> 
<div class="right">right div</div></div> 
.left{ 
float:left; 
background:green; 
width:100%; 
} 
.right{  
background:red; 
width:200px; 
} 

Спасибо.

Answer 1

Для выравнивания в DIVS рядом с Афоризм вы даете им обоим display: inline или display: inline-block или float: left, но вы не можете ничего рядом с DIV выравнивать с width: 100%. Потому что это означает, что вы хотите, чтобы Div занял всю строку. поэтому ничто не может исправить рядом с ним. Изменяя ширину, чтобы быть что-то другое, чем на 100% и давая как дивы float: left вы будете выполнять то, что вы хотите, как этот http://jsfiddle.net/6707pn01/

Answer 2

Вы можете использовать CSS calc сделать это с очень хорошей поддержкой браузера (http://caniuse.com/#feat=calc):

.left{ 
 
    float:left; 
 
    background:green; 
 
    
 
    width: calc(100% - 200px); 
 
} 
 
.right{  
 
    background:red; 
 
    width:200px; 
 
    
 
    float: right; 
 
}

<div style="width:100%;"><div class="left">left div</div> 
 
<div class="right">right div</div></div>

Answer 3

float:right; ваш "правильный" ДИВ, и поставить его первым:

<div style="height:100px; width:100px; background-color:red; float:right;"></div> 
 
<div style="height:100px; background-color:blue;"></div>

Answer 4

Вы можете использовать отрицательные поля, чтобы свести на нет ширины неподвижного с элементом, то поплавком фиксированной шириной элемента вправо.

.left{ 
 
    float: left; 
 
    background: green; 
 
    width: 100%; 
 
    margin-right: -200px; 
 
} 
 
.right{  
 
    background: red; 
 
    width: 200px; 
 
    float: right; 
 
}

<div style="width:100%;"> 
 
    <div class="left">left div</div> 
 
    <div class="right">right div</div> 
 
</div>