我有一个div
(。容器),其宽度可变,包含2 divs
。右div
(。div-submit)具有可变宽度,具体取决于所使用的语言。我希望左div
(div-textarea)调整并占用左边的所有剩余空间。如何在不使用flexbox的情况下实现这一目标?请参阅下面的代码和此jsfiddle
<div class="container">
<div class="div-textarea">
<textarea id="txtarea" placeholder="This is a textarea"></textarea>
</div>
<div class="div-submit">
<input type="submit" value="Post">
</div>
</div>
请注意,右div
没有固定的宽度,所以解决方案就像
this one不起作用。
感谢。
答案 0 :(得分:1)
我从您的textarea div中删除了float:left;
并添加了overflow:hidden;
。我还在HTML中重新定位了提交div,以便它放在textarea div之前。它似乎工作正常。
答案 1 :(得分:0)
尝试使用display:table;
例如:
.container{
background-color: green;
display:table;
}
.div-textarea{
display:table-cell;
background-color: blue;
opacity: 0.5;
width:100%;
}
.div-submit{
display:table-cell;
background-color: red;
opacity: 0.5;
}
希望这有帮助!
*的 修改 *
用另一个div包裹div-text area
和div-submit
并将其显示设为display:table-row;