流體的div - 裏面流體和修復左流體，右固定

-1

<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/

來源

2013-08-07 norbert

你的意思是這樣的？ http://fiddle.jshell.net/aY3E3/ –

不是很可靠，因爲你已經使用了％修復div。我需要它們的像素值 – norbert

好的，這個怎麼樣？ http://fiddle.jshell.net/5kXHR/我看到這裏後發現它：http：//stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left -fluid –

我檢查了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.

來源

2013-08-07 16:36:08

如何努力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/

來源

2013-08-07 15:50:28

這正是我所需要的，但我必須支持舊的ie，所以對我來說使用舊的方法並且不要兩次編寫代碼會更好。但非常感謝你的解決方案！ :) – norbert

流體的div - 裏面流體和修復左流體，右固定

回答

相關問題