Css 无固定宽度的列布局

我想做一些非常基本的事情——两列布局，其中左列的宽度由内容决定（通常很小），右列占据剩余的宽度

完整示例位于，但基本上我有如下HTML:

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

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

---

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

溢出：隐藏；右边的分区将完成这项工作

已更新您提供的链接，请告知此链接是否适用于您

---

溢出：隐藏

；右边的分区将完成这项工作

已更新您提供的链接，请告知此链接是否适用于您

---

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

---

您可以使用一些表格布局CSS属性来实现这一点，包括IE8：

您可以使用布局来实现（旧版IE不支持此功能。）

示例：

您可以使用布局来实现（旧版IE不支持此功能。）

示例：

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>

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);

});

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>

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);

});

---

你应该发布你的帖子，这是一个很好的解决方案：）谢谢，这似乎正是我想要的。我查看了文档中的“溢出”，但老实说，我不明白为什么它会有帮助。我认为它只决定了当内容对于容器来说已经太大时才会发生这种情况。那么这里有什么魔力呢？看一看，这应该可以消除你的疑虑谢谢。我还发现这可以解释这一点。而且，似乎“position:static”for.right是不必要的，因为它是默认的。“位置：相对”也不是。左似乎是必要的，因为没有应用定位。我能提供的最小CSS是在你应该发布你的，这是一个简洁的解决方案：）谢谢，这看起来就像我想要的一样。我查看了文档中的“溢出”，但老实说，我不明白为什么它会有帮助。我认为它只决定了当内容对于容器来说已经太大时才会发生这种情况。那么这里有什么魔力呢？看一看，这应该可以消除你的疑虑谢谢。我还发现这可以解释这一点。而且，似乎“position:static”for.right是不必要的，因为它是默认的。“位置：相对”也不是。左似乎是必要的，因为没有应用定位。我能提供的最小CSS是

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

.right {
    float: left;
}

$(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);

});