2010-08-11 62 views
-1

image of css layout that i wantCSS兩個欄佈局問題

THAS是我想要完成,就是那種,我有有茨艾倫煩惱兩列在一起的佈局,但比第二長的第一位,並讓他們內的白色DIV。

所以..

DIV1:僅僅是一個自動的高度和黑色BG
DIV2格:同DIV1但白色BG
DIV3和DIV4與汽車高度的div也和灰BG在一些點div 4可能比div 3更長或反過來,這些列可以在高度上增加,因此div1和div2應該延伸
div5-8只是圖像。

我能夠得到這個定位的div,但他們不會留在白色div(當我浮動左div 3) 他們顯示像div 3是在白色和黑色div頂部,如果我讓時間越長,綿延超過DIV1和2

或者我也可以讓他們所有的白格內,但沒有漂浮離開DIV4其犯規幫助=/

我知道必須有一些定位問題,但我嘗試了一些組合,他們不會工作,在這一點上,我沒有使用任何相對或任何位置。

幫助表示讚賞。

回答

0

DIV3和DIV4必須float編...

DIV5 - DIV8需要clear:both;

<style> 
     div       { overflow:hidden; } 
     div.3, div.4     { float:left; } 
     div.5, div.6, div.7, div.8 { clear:both; } 

    </style> 
    <div class="1"> 
     <div class="2"> 
     <div class="3"></div> 
     <div class="4"></div> 
     <div class="5"></div> 
     <div class="6"></div> 
     <div class="7"></div> 
     <div class="8"></div> 
     </div> 
    </div> 

這是它的JIST,您在填寫其餘...

+0

非常感謝你,溢出:隱藏,使它發生!,不知道它做了什麼,但沒有調查,再次感謝! – Gmo 2010-08-11 03:22:37

+0

Yeap,當你沒有指定它時溢出是很時髦的。我通常將其設置爲隱藏。我很少想在東西容器外面看到東西。 – xandercoded 2010-08-11 03:26:55

1

960 Grid System。通過使用960框架,您應該能夠在幾分鐘內完成上述模型。