流体容器，流体固定流体内部布局

Question

我试图为我的标题中提到的问题找到一个解决办法，但没有结果。

基本上，我有一个流体<div>容器，它有三个内部元素(一个固定宽度的<img>元素，一个流体宽度<textarea>，一个固定宽度的<button>)。

我已经尝试了一些负面的东西，但没有运气。<textarea>的长度总是会触发下面的按钮。

我添加了几张图片来更好地描述我想要的东西：

​

和

​

​

编辑：总结一下，我想让元素‘覆盖’那个区域，而不是包装。

也是，我想通过避免javascript调整监听器的大小来做到这一点。只有纯CSS。

Answer 1

您可以通过使用百分比:id或仅用作示例的类来实现这一点。

<div id="fluidwrapper" style="width:100%;">
    <div id="imagewrapper" style="float:left;width:100px;">
        <img>noimg</img>
    </div>
    <div id="textandbuttonwrapper" style="width:40%;white-space:nowrap;">
        <textarea style="width:80%;"></textarea>
        <button style="width:20%;">button</button> <!-- okay that is not fixed at all -->
    </div>
</div>

空白:实际上，我猜现在就是你在寻找的东西。希望能帮上忙。