本文介绍了如何使一列占用所有剩余宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下小提琴:



我需要第三个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>

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

08-31 01:13