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

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>

white-space:nowrap 实际上，我猜你正在寻找什么。我希望它有所帮助。