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

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 实际上就是您要搜索的内容。希望对您有所帮助。