我想做一些非常基本的事情 - 两列布局,其中左列的宽度由内容决定(总是很小),右列采用剩余的宽度。
完整示例位于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;无论是。那我有什么选择呢?
答案 0 :(得分:1)
答案 1 :(得分:0)
您可以使用一些表格布局CSS属性来完成此任务,适用于包括IE8:
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+ */
答案 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);
});