我有兩個divs我想并排放在一個容器中。我遇到的問題是，左側div的大小取決于內容，而右側div應該使用所有可用空間。<style>div.left { display: inline-block; outline-width: 0; background-color: yellow; padding-right: 5px;}div.right{ display: inline-block; max-width: 100%; outline-width: 0; background-color: green;}.container{ background:black; width:450px;}</style><div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div></div>我嘗試過flex,, table-cell-...幾乎所有的東西。我缺少什么？
1 回答
MMMHUHU
TA貢獻1834條經驗 獲得超8個贊
display: flexflex:1如果您也分配給div，則會完成這項工作.right，因此它將占用所有剩余空間：
div.left {
background: peachpuff;
padding: 10px;
}
div.right{
flex: 1;
background-color: yellowgreen;
padding: 10px;
}
.container{
background:black;
display: flex;
width:450px;
}
<div class="container">
<div class="left">
Variable content here
</div>
<div class="right">
remaining space
</div>
</div>
- 1 回答
- 0 關注
- 157 瀏覽
添加回答
舉報
0/150
提交
取消