css - 流体 divs - 左侧流体与内部流体和修复，右侧修复

Question

我有 HTML 结构

<div class="wraper">
        <div class="lewy-fluid">
            <div class="lewy-fluid-fluid">
                TITLE
            </div>
            <div class="lewy-fluid-fix">
                Kontakt
            </div>
        </div>
        <div class="prawy-fix">
            Czat
        </div>
    </div>

并且需要做:

 _____________________________________________________________________________
| .LEWY-FLUID                                         | .PRAWY-FIX            |

在 .LEWY-FLUID 内部:

 _________________________________________________________
| .LEWY-FLUID-FLUID              | .LEWY-FLUID-FIX       |

所以我有流动的和固定的 div，在那个流动的 div 里面我也有流动的和固定的 div。

我怎样才能使 .LEWY-FLUID 内的东西成为我想要的样子？

fiddle 链接:http://fiddle.jshell.net/ozeczek/hu4JH/

Answer 1

我检查了here并找到了解决您遇到的问题的方法。这里的主要技巧是翻转 div 的顺序(在您的 html 中首先放置固定的右侧 div，然后是流动的左侧 div)。

<div class="wraper">
    <div class="prawy-fix">Czat</div>
    <div class="lewy-fluid">
        <div class="lewy-fluid-fix">Kontakt</div>
        <div class="lewy-fluid-fluid">Headshot media</div>
    </div>
</div>

然后对于您的 css，将您的固定 div 设置为 float:right 和您想要的宽度，并将您的流体 div 设置为 width:auto 和 overflow:hidden，以便它们占用剩余空间。

演示:http://fiddle.jshell.net/5kXHR/

关于为什么应该使用 overflow:hidden 的更多信息，请阅读 here.