如何对齐两个相邻的div，一个包裹文本，另一个填充其余的？

Question

如何在CSS中实现以下功能：

右侧div的宽度取决于文本（wrap_content）。

左侧div应填充剩余空间（宽度= 100％ - 右侧div）。

（假设右边的div的最大宽度为50px，对于较小的文本，它应该包裹文本）

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/