两个div并排，右边div固定宽度

Question

我知道这已经被问过一百万次了，但我似乎仍然找不到答案（大多数问题似乎与我想要的不一样）。

我有两个 div，分别是 #left 和 #right。#right 的固定尺寸为 150px x 50px。我希望 #left 扩展并填充剩余空间，#right 位于屏幕的最右侧。我尝试过以不同的方式浮动它们并设置 display: inline-block; 但我似乎仍然无法确定它。我读过的所有文章都是关于左边的 div 被固定，右边的 div 正在增长。我尝试反转我读到的内容，但它总是导致#left div 在#right 周围浮动。我的意思是，我的#left div 将缩小到最小（内联块），或者它将显示前 50 像素直到 #right，然后 #left 的其余部分将隐藏在 #right 下，而不是保持齐平。

我希望这是有道理的。这有点难以解释。

Answer 1

像这样写：

.right{
 width:150px;
 height:150px;
 float:right;
 background:red;
}
.left{
 height:150px;
 background:green;
 overflow:hidden;
}

HTML

<div class="right">fixed</div>
<div class="left">auto</div>

检查这个http://jsfiddle.net/TW4dn/