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

overflow:hidden; 正确的 div 将完成这项工作

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

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

Answer 2

您可以使用一些表格布局 CSS 属性来完成此操作，包括 IE8：

jsFiddle

body > div {
    display: table-row;
    width: 100%;
}
.badge {
    background-color: #468847;
    border-radius: 9px;
    padding: 2px 9px;
    color: #ffffff;
    width: auto;
    display: inline-block;
    margin: 6px;
    white-space: nowrap;
}
.left {
    display: table-cell;
}
.right {
    display: table-cell;
}

Answer 3

可以使用Flex布局来实现（旧版IE不支持）

    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */     
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

示例：http: //jsfiddle.net/EzHVX/7/

Answer 4

的HTML

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

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

CSS：

.parent{
   widht: 100%;
   clear:both;
}
.clear{
   clear:both;
}
.left {
    float: left;
}    

.right {
    float: left;
}

jQuery

$(document).ready(function(){
    var parent_width= $('.parent').width();
    var left_width= $('.left').width();
    var right_width = parseInt(parent_width) - parseInt(left_width);
    $('.right').css('max-width',right_width);

});