正确的div与可变宽度，左div需要剩余宽度

我有一个div（.container）的可变宽度包含2 divs。右边的div（.div-submit）的宽度是可变的，这取决于所使用的语言。我想要左侧的div（div-textarea）进行调整，并取走左侧的所有剩余空间。我怎样才能实现这一点，而不使用flexboxes？请参见下面的代码，这jsfiddle 正确的div与可变宽度，左div需要剩余宽度

<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解决方案不起作用。

谢谢。

来源

2013-07-27 Gabriel Caron L' Écuyer

使用display：表你的容器和显示：表格单元格为您的内部divs – Pete

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

Please see my fiddle

来源

2013-07-27 16:47:07 PTD

尝试使用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-text area和div-submit与另一个DIV和设置它的显示器display:table-row;

来源

2013-07-27 16:33:31

不幸的是，在包装方面，不得不将右侧div压缩到尽可能最小的尺寸。所以，只要把“hello world”放在正确的div里就会有“hello”和“world”包装在不同的行上。只要你的个人内容框在正确的div内有确切的宽度（你只是不知道可变数量的元素的总和），你就没事。或者依靠基于文本的内容的'white-space：nowrap'。 – 2013-07-27 16:43:05

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

我在%代替pixels改变宽度和使用text: no-wrap

来源

2013-07-27 16:47:57

正确的div与可变宽度，左div需要剩余宽度

回答

相关问题