本文介绍了如何使一列占用所有剩余宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下小提琴:
我需要第三个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