如何讓一列取所有剩餘的寬度？

我有以下小提琴：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>

來源

2015-07-19 Hardist

如果您需要最新的方法，它是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>

來源

2015-07-19 16:24:50

方法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>

來源

2015-07-19 15:11:57 Stickers

您可以絕對定位塊，每塊的左邊緣和最後一個塊的右邊緣設置爲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);...

來源

2015-07-19 15:12:10

如何讓一列取所有剩餘的寬度？

回答

相關問題