如何對齊兩個相鄰的div，其中一個包裝文本，另一個填充其餘部分？

Question

如何在CSS中實現以下內容：

右側div的寬度取決於文本（wrap_content）。

左div應填充剩餘空間（寬度= 100％ - 右div）。

（假設正確的div有50像素的最大寬度和較小的文本應自動換行）

Answer 1

你可以float的權列，並隱藏水平溢出所述由overflow-x: hidden;左柱，如下所示：

.right { 
    max-width: 50px; 
    float: right; 
} 

.left { overflow-x: hidden; } 

<div class="right">Text</div> 
<div class="left"> ... </div> 

WORKING DEMO。

Answer 2

您可以使用float屬性來放置並跟隨javascript來計算左輸入框的寬度。

<form> 
    <div class="wrap"> 
     <input type="submit" class="button" value="Submit Test"></a> 
     <input type="text"/> 
    </div> 
</form> 

的Javascript：

$(document).ready(function() 
{ 
    var inputWidth=parseInt($('.wrap').css('width'))-parseInt($('.button').css('width'))-15; 
    $('input').css('width',inputWidth); 
}); 

結帳工作小提琴：http://jsfiddle.net/ankur1990/xXXj8/6/