如何让一列取所有剩余的宽度？

问题描述：

我有以下小提琴：http://jsfiddle.net/j40recob/如何让一列取所有剩余的宽度？

我需要第三个div来拉伸剩余宽度（100％）。尝试了几个解决方案，如其他两个div上的float:left，但它不起作用。如果我将第三个div设置为100％，它会在其他两个div下面显示，但它应该保持在同一行。

.ui-tablewrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    color: #000; 
 
    font-size: 0; 
 
} 
 
.ui-tablebanner { 
 
    display: inline-block; 
 
    margin-right: 1px; 
 
    color: #000; 
 
    border: 1px solid #000; 
 
    height: 25px; 
 
    font-size: .75rem; 
 
} 
 
#ui-tablebanner-30 { 
 
    width: 30px; 
 
} 
 
#ui-tablebanner-26 { 
 
    width: 26px; 
 
}

<div class="ui-tablewrapper"> 
 
    <div class="ui-tablebanner" id="ui-tablebanner-30">1</div> 
 
    <div class="ui-tablebanner" id="ui-tablebanner-26">2</div> 
 
    <div class="ui-tablebanner" id="ui-tablebanner">3</div> 
 
</div>

答

如果您需要最新的方法，它是flexbox。

.ui-tablewrapper { 
 
    color: #fff; 
 
    display: flex; 
 
} 
 
.ui-tablebanner { 
 
    color: #000; 
 
    border: 1px solid #000; 
 
    height: 25px; 
 
    font-size: .75rem; 
 
    flex: 0 0 auto 
 
} 
 
#ui-tablebanner-26 { 
 
    flex-basis: 26px; 
 
    background: red; 
 
} 
 
#ui-tablebanner-30 { 
 
    flex-basis: 30px; 
 
    background: blue; 
 
} 
 
#ui-tablebanner { 
 
    flex-grow: 1; 
 
    background: green; 
 
}

<div class="ui-tablewrapper"> 
 
    <div class="ui-tablebanner" id="ui-tablebanner-30">1</div> 
 
    <div class="ui-tablebanner" id="ui-tablebanner-26">2</div> 
 
    <div class="ui-tablebanner" id="ui-tablebanner">3</div> 
 
</div>

答

方法1 - 使用float。将前两项设置为float:left，将第三项设置为overflow:auto。浏览器支持超强IE6 +。

.row { 
 
    overflow: auto; 
 
} 
 
.item { 
 
    float: left; 
 
    border: 1px solid; 
 
    margin-right: 1px; 
 
    width: 30px; 
 
} 
 
.item:last-child { 
 
    float: none; 
 
    overflow: auto; 
 
    width: auto; 
 
    margin-right: 0; 
 
}

<div class="row"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
</div>

方法2 - 用CSS布局table。最后一个单元格将自动占用所有可用宽度。浏览器支持很好IE8 +。

.row { 
 
    display: table; 
 
    border-collapse: separate; 
 
    border-spacing: 1px 0; 
 
    width: 100%; 
 
} 
 
.item { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    border: 1px solid; 
 
    width: 30px; 
 
} 
 
.item:last-child { 
 
    width: auto; 
 
}

<div class="row"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
</div>

方法3 - 使用inline-block和calc()，和做数学题，要知道，任何边界，填充和利润率都计算在内。浏览器支持不错IE9 +。

.row { 
 
    font-size: 0; /*remove inline gaps*/ 
 
} 
 
.item { 
 
    font-size: 16px; /*reset font size*/ 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    border: 1px solid; 
 
    margin-right: 1px; 
 
    width: 30px; 
 
} 
 
.item:last-child { 
 
    width: calc(100% - 68px); /*do the math*/ 
 
    margin-right: 0; 
 
}

<div class="row"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
</div>

答

您可以绝对定位块，每块的左边缘和最后一个块的右边缘设置为0：

.ui-tablebanner { 
    box-sizing: border-box; 
    position: absolute; 
} 

#ui-tablebanner-26 { 
    width: 26px; 
    left: 31px; 

} 

#ui-tablebanner-30 { 
    width: 30px; 
    left: 0; 
} 

#ui-tablebanner { 
    left: 58px; 
    right: 0; 
}

这里的工作小提琴：https://jsfiddle.net/7tgfmou2/1/

另外，我还建议使用box-sizing: border-box来进行宽度计算更容易，https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。还有像Sass这样的CSS预处理器，http://sass-lang.com/，允许您在位置计算中使用变量。例如：#ui-tablebanner { left: $banner-26-width + $banner-30-width + ($banner-margin*2);...

如何让一列取所有剩余的宽度？

相关推荐