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不支持＆＃34; 100％ - 10em＆＃34;作为宽度。即使它支持它，我也不愿硬编码＆＃34; 10em＆＃34;无论是。那我有什么选择呢？

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

});

没有固定宽度的列布局

4 个答案: