css - 没有固定宽度的列布局

Question

我想做一些非常基本的事情——一个两列布局，其中左列的宽度由内容决定(内容总是很小)，右列占据剩余的宽度。

完整示例位于 http://jsfiddle.net/EzHVX/2/ , 但基本上我有如下 HTML::

<div class="left">
   <div class="badge">all 15</div>    
</div>

<div class="right">
   <div class="badge">...</div>
   <div class="badge">...</div>    
  ....
</div>

CSS 的重要部分就是::

.left {
    float: left;
}    

.right {
    float: left;
    width: 400px;
}

没有明确的宽度，右列开始环绕左列，这是我不想要的。但我也不想使用显式宽度。并且 CSS 不支持“100% - 10em”作为宽度。即使它支持它，我也不想硬编码“10em”。那么我有什么选择呢？

Answer 1

溢出:隐藏；到右边的 div 就可以了

已更新您提供的链接，请告知这是否适合您

http://jsfiddle.net/EzHVX/4/