推 aiyswu:畫圖工具: cacoo.com ,免費的. 11/14 08:59
各位版上的前輩好
最近在CSS Div 排版上遇到一個問題
想問問各位有沒有比較建議的解法
目前的編制大概是這樣
(手邊沒有可以畫圖的工具 直接用code來呈現了)
<div id="main">
<div id="floatContainer">
<div id="floatSetA"> </div>
<div id="floatSetB> </div>
<div id="subSet1" class="needFloat"> </div>
<div id="subSet2" class="needFloat"> </div>
<div id="subSet3" class="needFloat"> </div>
...
..
.
</div>
</div>
<div id="footer">
</div>
#floatSetA 與 #floatSetB 在畫面上會是一個長條的 block bar
各個 subSetN 則是比較短的 block
目前想要呈現的就是希望畫面當中 #floatSetA, #floatSetB 可以水平切齊
至於其他的 subSetN 則在 #floatSetB 右側水平切齊後隨意排列即可 (因為比較短)
關於 subSetN 有點想用這個 framework -> http://masonry.desandro.com/
但目前光是在 這三個要水平切齊就有點卡住 一直不知道該怎麼下手
另外因為 #main 本身外觀也有用框框包住 css是 position
所以 內部的 float 對他來說 他會不知道長度 結果就造成裡面的 div overflow 的現象
想問問這部份該怎麼處理？
我目前設置的 css代碼如下
#main { position: relative;}
#footer { clear: both; position: relative;}
#floatContainer { }
#floatSetA { float:left; }
#floatSetB { float:left; }
.needFloat { float:left; }
還請版上各位高手指導 謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.160.222.6