與DIV CSS佈局問題

-1

2列
用的 100％的窗口的高度的每一列
左列應寬度的40％和有兩行，底行的高度應該是 20像素和頂部應占用的剩餘空間
右列應是寬度爲60％和有兩行，T的高度他排在第一位的應該是70％，最低的是30％。

我還希望能夠在第二列上切換隱藏/顯示並在其位置顯示另一列。我知道如何隱藏和顯示JavaScript，但我不知道如何將另一列放在第二列的位置，而不使用絕對定位。

這是兩個不同的佈局的例子，藍色區域代表窗口大小，綠色是div，我沒有標記列，但你應該能夠看到有兩列。此外，我與利潤率會：0和padding：0，我留下的空間其間的div澄清佈局：

http://imageshack.us/photo/my-images/535/layout1rt.png/

http://imageshack.us/photo/my-images/683/layout2z.png/

* UPDATE * 對不起所有憤怒我的問題生成。我已經搜索並嘗試使用div，但還沒有提出一個很好的解決方案。我沒有真正適合100％，有一些像素差異，我會發佈下面的代碼。我先用framesets進行了設計，然後再創建表格，然後我認爲我必須學習divs是如何真正起作用的。好幾天後，搜索和閱讀關於CSS浮動左，等我放棄了，並創建了這個帳戶。看來這對於理解它來製作我想要的佈局的人來說是非常快的，這就是爲什麼我沒有發佈我的代碼。我可以通過閱讀和玩答案代碼來學習，但是你是對的，我犯了一個錯誤。

我的代碼在Mozilla中100％工作，但在IE中失敗。 * UPDATE *

*更新2 我得到了這一切工作，但似乎是在IE中一個像素的錯誤，所以我不得不添加溢出：隱藏不了滾動條。不知道是什麼原因？ 更新2 *

<html> 
<head> 
<script type="text/javascript"> 
function toggleSheet(){ 
    if(document.getElementById("col3").style.display == "block"){ 
     document.getElementById("col3").style.display = "none"; 
    } else { 
     document.getElementById("col3").style.display = "block"; 
    } 
} 
</script> 
<style type="text/css"> 
* { 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
} 
#wrapper { 
    width: 100%; 
    height:100%; 
} 

#col1 { 
    float:left; 
    width: 40%; 
    height:100%; 
    background:blue; 
} 

#col2 { 
    float:right; 
    width: 60%; 
    height:100%; 
    background:red; 
} 

#col3 { 
    position:absolute; 
    width: 60%; 
    right:0; 
    height:100%; 
    background:black; 
    display:none; 
} 

#col1top { 
    height:100%; 
    margin-bottom: -20px; 
    background:purple; 
} 

#col2top { 
    height:70%; 
    background:green; 
} 

#col1bottom { 
    height: 20px; 
    background:brown; 
} 

#col2bottom { 
    height:30%; 
    background:yellow; 
} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="col1"> 
     <div id="col1top" onClick="toggleSheet();"> 

     </div> 
     <div id="col1bottom"> 

     </div> 
    </div> 
    <div id="col2"> 
     <div id="col2top"> 

     </div> 
     <div id="col2bottom"> 

     </div> 
    </div> 
    <div id="col3"> 

    </div> 
</div> 
</body> 
</html>

感謝您的時間。

/100萬年

來源

2011-05-22 illion

你有問題嗎？或者你只是想讓每個人都爲你做你的佈局？ – 2011-05-22 03:11:14

它不應該很難實現你所展示的內容，但是到目前爲止，無論你完成了什麼，都可以發佈代碼，以便我們可以輕鬆解決問題。 – kobe 2011-05-22 04:26:53

你必須把一些code.so我們可以指導你，但我們不能爲你做完整的事情。 – Anish 2011-05-22 06:38:47

這是真的有種荒謬的事情來回答，但我很無聊。

http://jsfiddle.net/m7TuJ/embedded/result/

不以任何方式一個最好的解決方案，但它達到你所要求的東西。

來源

2011-05-22 07:10:23 imjared

感謝您的回答，但這種佈局下面有空間，我希望佈局覆蓋整個窗口區域而不滾動。我用我的代碼更新了我的帖子。唯一缺少的是「col1top」，哪個高度沒有覆蓋該區域的其餘部分。 – illion 2011-05-22 16:23:40

你把它從jsfiddle中拿出來了嗎？我只能假設你正在查看應用於iframe的填充。用螢火蟲或webkit檢查員進行簡單的檢查會告訴你整個區域都被覆蓋了。 – imjared 2011-05-23 10:43:57

與DIV CSS佈局問題

回答

相關問題