css - 两个div并排，右侧div固定宽度

Question

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

我有两个 div，分别是#left 和#right。 #right 的尺寸固定为 150px x 50px。我希望 #left 扩展并填充剩余空间，#right 位于屏幕的最右侧。我试过以不同的方式 float 它们并设置 display: inline-block;但我似乎仍然无法确定。我读过的所有文章都是关于左侧 div 被修复而右侧 div 不断增长的。我试着颠倒我读到的内容，但它总是导致#left div 在#right 周围 float 。我的意思是，我的#left div 将缩小到最小(内联 block )，或者它将显示第一个 50px 到#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/