2013-04-23 62 views
2

我需要實現一個儘可能多的瀏覽器工作的響應表設計。剩下的兩個單元格(左/中)將具有靜態寬度,而我需要根據當前窗口的大小右側div具有動態寬度。具有靜態列的響應式表格佈局?

這是標記的樣子:

<div class="wrapper"> 
    <div class="leftWrapper"> 
     <div class="left">left</div> 
     <div class="mid">mid</div> 
    </div> 
    <div class="right">Lorem ipsum dolor sit amet, facilisi velit justo non. Pretium vestibulum nibh nonummy et a libero. Aptent consequat suscipit ridiculus leo pellentesque tempus, suspendisse pretium quis turpis. Euismod facilisi congue ab. Pretium ultricies non aliquam mi, cras sint, pede elit ligula aliquam in scelerisque ultricies, vitae dictum tincidunt sit, torquent eu et eros suspendisse. Voluptate nec curabitur et at nam non, diam vel, lorem nibh id condimentum a, laborum ornare, pede sem mattis. Numquam magna non metus sit fringilla, ligula quis cras, in lorem, praesent eros volutpat nisl vehicula tellus, egestas nullam. Pede aliquam donec.</div> 
</div> 

http://jsfiddle.net/mmZeN/

我如何讓在同一行作爲左和中右細胞細胞停留在不使用顯示:表單元格,並在同一時間litting它的基礎上加油車的寬度,調整?

回答

2

我從完全從頭開始做這個,看它是否對你有用

Demo

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="center"></div> 
    <div class="right"></div> 
</div> 

<style> 
.left { 
    float: left; 
    width: 200px; 
    background-color:#0f0; 
    min-height: 200px; 
} 

.center { 
    float: left; 
    width: 120px; 
    background-color:#000; 
    min-height: 200px; 
} 
.right { 
    height: 200px; 
    background-color: #f0f; 
    margin-left: 320px; 
} 
</style> 
+0

我根據你的要求制定了這個解決方案:http://jsfiddle.net/AAWtY/它似乎可以工作,但它是否可以在所有瀏覽器中工作?甚至移動?另外,爲什麼你有317px而不是320px? – Banshee 2013-04-23 12:10:36

+0

@SnowJim與其他方面的測試,因爲我已經漂浮他們,我的右邊框底部被渲染所以後來忘了改-317 ..和是的,它應該支持 – 2013-04-23 12:12:48

0

如果您對左邊和中間的一個靜態值,你可以指定使用CSS,並讓其他列是百分比值。這應該在這種情況下工作。

更新:獲取與當前佔位符的PX(可以是DIV),扣除左和中間列的寬度,然後保持寬度例如:Xpx 容器×100 這個值可能會得到爲百分比的Xpx /總寬度。

+0

是的,但我要如何做到這一點? 100%會把右欄放到第二排? – Banshee 2013-04-23 12:05:03