html - 具有可变宽度的右 div，左 div 采用剩余宽度

Question

我有一个div可变宽度的 (.container) 包含 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没有固定宽度，因此像这样的解决方案 不起作用。

谢谢。

Answer 1

我float:left;从您的 textarea div 中删除并添加了overflow:hidden;. 我还在 HTML 中重新定位了提交 div，以便将其放置在 textarea div 之前。它似乎工作正常。

请看我的小提琴

Answer 2

试试这个，如果它可以帮助你：JSFiddle

我改变了宽度%而不是pixels使用text: no-wrap

Answer 3

尝试使用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 areaand并将其显示设置为div-submitdisplay:table-row;