没有固定宽度的列布局

时间:2013-05-07 05:38:50

标签: css css-float

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

完整示例位于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;无论是。那我有什么选择呢?

4 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

您可以使用一些表格布局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;
}

答案 2 :(得分:0)

您可以使用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/

答案 3 :(得分:0)

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

});