右侧div具有可变宽度,左侧div占用剩余宽度

时间:2013-07-27 16:25:58

标签: html css css3

我有一个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不起作用。

感谢。

2 个答案:

答案 0 :(得分:1)

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

Please see my fiddle

答案 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 areadiv-submit并将其显示设为display:table-row;