如何使一列占用所有剩余宽度？ [英] How to make one column to take all the remaining width?

问题描述

我有以下小提琴： 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-tablebannerid =ui-tablebanner-30> 1< / div> < div class =ui-tablebannerid =ui-tablebanner-26> 2< / div> < div class =ui-tablebannerid =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-tablebannerid =ui-tablebanner-30> 1< / div> < div class =ui-tablebannerid =ui-tablebanner-26> 2< / div> < div class =ui-tablebannerid =ui-tablebanner> 3< / div>< / div>  

>

I have the following fiddle: http://jsfiddle.net/j40recob/

I need the third div to stretch the remaining width (100%). Tried several solutions like float:left on the other two divs, but it didn't work. And if I set the third div itself on 100%, it displays below the other two divs but it should remain on the same line.

.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>

解决方案

If you want the most up-to-date method, it's 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>

这篇关于如何使一列占用所有剩余宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！