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

我试图找到解决我在标题中提到的问题，但无济于事。流体容器，流体固定流体内部布局

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

我已经尝试了一些负边距但没有运气的东西。 <textarea>的长度将始终触发按钮在下方环绕。

我已经添加了几张照片，以更好地描述我想要什么： screenshot with lower window width

和

screenshot with larger window width

编辑：概括起来讲，我想有元素'覆盖'该区域而不包裹。

此外，我想避免的JavaScript 调整听众做到这一点。只有纯CSS。

来源

2013-10-07 Zubzob

试着做一个你已经完成的[jsFiddle]（http://jsfiddle.net/） – Brewal

添加一个最小宽度到fliud容器，否则当窗口很小时容器占用窗口的宽度（如果它是100％），所以内部的元件不适合容器。 – Froxz

您可以通过使用百分比来实现：仅用作示例的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其实是你在寻找的东西，我猜。我希望它有帮助。

来源

2013-10-07 15:06:20 user2853437

我不知道这是如何解决我的问题。 textarea不会扩展到足以使所有这三个元素都填充该区域（如图中所示），并且会在某些分辨率下破解（好吧，它不会换行但会破坏）。我编辑了我的问题以更好地反映这一点。 – Zubzob

我在发布之前测试了代码，并且textarea始终延伸。确保布局会以非常小的分辨率破解，但是因此您可以使用媒体查询（例如http://css-tricks.com/css-media-queries/）。另外，您可以为buttontag提供流量权限，以便它始终保持不变在那里，所以你可以防止分页。 – user2853437

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

回答

相关问题