流体的div - 里面流体和修复左流体，右固定

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流体内部：

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

所以我有流体和固定的div和里面的流体div我也有流体和固定div。

我该如何在.LEWY-FLUID内部做些事情才能成为我想要的？

小提琴链接：http://fiddle.jshell.net/ozeczek/hu4JH/

Answer 1

我检查了here并找到了解决问题的方法。这里的主要技巧是翻转div的顺序（将固定的正确div首先放在你的html中，然后流体留下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：右侧，而所需的宽度，和你的流体的div有宽度：汽车和溢出：隐藏，使他们占用的剩余空间。

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

更多关于为什么要使用溢出：隐藏，读here.

Answer 2

如何努力Flexbox的？现在，我只能测试在浏览器的最新版本，但是这似乎很好地工作，完成你所需要的：

HTML：

<div class="wrap"> 
    <div class="fluid wrap"> 
    <div class="fluid"></div> 
    <div class="fixed"></div> 
    </div> 
    <div class="fixed"></div> 
</div> 

CSS：

.wrap { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 
.wrap div { 
    height: 5em; 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
} 
.fluid { 
    background: tomato; 
    width: 100%; 
} 
.fixed { 
    background: beige; 
    width: 150px; 
    min-width: 150px; 
} 
.fluid.wrap .fluid { 
    background: orange; 
} 
.fluid.wrap .fixed { 
    background:tomato; 
} 

小提琴：http://jsfiddle.net/xdLPZ/2/