我有两个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 关注
- 58 浏览
添加回答
举报
0/150
提交
取消