没有固定宽度的列布局

我想做一些非常基本的事情 - 一个两列布局，其中左列的宽度由内容决定（总是很小），右列取剩余宽度。没有固定宽度的列布局

完整的例子是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”。那么我有什么选择？

来源

2013-05-07 Vladimir Prus

overflow:hidden;在右边的div将做的工作

已经更新了你给请让知道，如果这个作品的链接，你

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

来源

2013-05-07 05:51:24

你应该发布你的[jsFiddle]（http://jsfiddle.net/EzHVX/4/）然后，这是一个整洁的解决方案:) – 2013-05-07 05:54:09

感谢更新的链接 – 2013-05-07 05:56:55

谢谢，这似乎工作就像我想了。我已经看过“溢出”的文档，老实说，不知道为什么它有帮助。我虽然只是确定当容器已经太大时才发生内容。那么这里有什么魔力？ – 2013-05-07 10:49:59

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

来源

2013-05-07 05:51:38

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

来源

2013-05-07 06:04:52

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

});

来源

2013-05-07 06:20:20

没有固定宽度的列布局

回答

相关问题