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

Question

我试图找到我的标题中提到的问题的解决方案，但无济于事。

基本上，我有一个流畅的<div>容器，里面有三个内部元素（固定宽度<img>元素，流体宽度<textarea>，固定宽度<button>）

我已经尝试了一些带有负边距但却没有运气的东西。 <textarea>的长度将始终触发按钮以包裹在下面。

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

和

编辑：总结一下，我希望元素“覆盖”该区域而不是换行。

，我想通过避免使用javascript resize 监听器来实现此目的。只有纯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>

white-space：nowrap实际上就是你要搜索的内容，我想。 我希望它有所帮助。