一個HTML佈局問題

我想打一個HTML佈局，這是圖像： enter image description here 一個HTML佈局問題

整個頁面包含的div：

Head 
left 
main01 
main02

而且控制DIV：

toogle_bar1 
toogle_bar2

現在我想做出如下效果：

1）The head取瀏覽器的指定高度（例如50px），並取100％寬度的瀏覽器。 2）默認情況下，main02不可見，所以main01 div取left的相同高度並取左寬度。

3）當toggle_bar1點擊時，left應該隱藏/所示，一旦它是不可見，如果main01（和main02main02是可見的）將採取瀏覽器的所有寬度。

4）當點擊toggle_bar2時，main02應該隱藏/顯示，一旦它可見，它將採用與main01相同的寬度。

5）main01和main02應該有一個明確的寬度和高度屬性。 6）當窗口調整大小時，滾動條無法看到。

事實上，我可以使用JavaScript，但我不知道如果我可以使用純CSS（當然，JS是需要處理點擊事件）？

由於現在我使用JS，當toggle_bar1點擊，我設置left爲「顯示：無」，那麼caculate的clientwidth，並設置main01的寬度（和/或main02），我不知道這可以通過瀏覽器進行計算嗎？

我一直認爲我們應該避免做額外職位cacualte工作，如果他們可以通過瀏覽器完成。

任何想法？

來源

2011-07-08 hguser

我推薦使用YUI來爲你做這個。 – Brad

我們不能使用額外的js庫。 – hguser

你說main01和main02應該有一個明確的寬度。你是指百分比還是離散值？如果你想使用離散值，你用什麼來填補正確的差距（如果你的價值是小）。如果不存在差距，我認爲百分比值是一個好主意。如果兩者都可見，則將寬度設置爲45％，如果只有一個，則將寬度設置爲90％... – strauberry

你可以添加刪除CSS類主包裝。

讓說你有MainWrapper和它「左」，「中」，「右」

，那麼你可以從MainWrapper添加或刪除CSS類

.left-item, .right-item, .middle-item { // this are the classes in the Wrapper 
some base info 
} 

.has-left.has-middle .left-item { 
width:30%; 
} 
.has-left.has-middle .middle-item { 
width:70%; 
} 
.has-left.has-middle .right-item { 
display:none; 
}

有什麼辦法與其他組合有關，你應該知道。

不，你只是用js來「添加」或「刪除」你的css類，而css會爲你做。 MainWrapper類：左 - 已，中 - 右 - 右 - 右刪除其中一個，然後您的css調整。

這聽起來像你不需要任何通用版本，所以這可以做到這一點...

來源

2011-07-08 14:23:29 Luke

-1

，你可以嘗試其中之一，在頭髮定型：

a 
a:link 
a:focus 
a:hover 
a:visited 
a:active

也許......

來源

2011-07-08 14:20:57 Nasaralla

一個HTML佈局問題

回答

相關問題