各位大大好,小弟最近要製作產品列表頁~因為想用到自動排版功能~所以要用DIV方式排版~想要排出的版型如下圖DIV A為MENU 固定在左~DIV B為分類抬頭~固定在每個產品列表區塊的上方DIV C為產品簡介~依下圖方式分佈~因有可能數量為單數~故有可能空一區~ (空的那區再用一個空的DIV C 補上也可)而目前小弟能製做出下圖的樣式但是多放一個DIV C後卻變成下圖請問可能是哪方面的設定出了問題呢?因小弟希望在畫面縮小時自動變成底下排列方式,所以大概無法用TABLE方式排版 (P.S此部份沒有問題,問題在上一個步驟)
<style type="text/css">#demo_left { float:left; width:100px; border:1px solid #bebebe; height:500px; }#demo_right { float:left; width:500px; }.div_top { width:500px; height:50px; border:1px solid #bebebe; }.div_top_one { float:left; width:250px; }.div_top_two { float:right; width:250px; }.div_top_three { width:250px; }.div_bottom { width:500px; height:50px; border:1px solid #bebebe; }.div_bottom_one { float:left; width:250px; }.div_bottom_two { float:right; width:250px; }.div_bottom_three { width:250px; }</style>我想你應該看得懂語法
mozo1299 wrote:<style...(恕刪) 謝謝您,我三個的試成功了~但如果我要的DIV C 有4個5個以上呢?該怎麼用...我想說方法應該差不多就只畫圖畫到三個~沒想到第四個用上去後出現同樣問題~又要麻煩您解救一下了~
<style type="text/css">#demo_left { float:left; width:100px; border:1px solid #bebebe; height:500px; }#demo_right { float:left; width:500px; }.div_top { width:500px; height:50px; border:1px solid #bebebe; }.div_top_one { float:left; width:250px; }.div_top_two { float:right; width:250px; }.div_top_three { float:right; width:250px; }.div_top_four { float:right; width:250px; }.div_top_five { width:250px; }.div_bottom { width:500px; height:50px; border:1px solid #bebebe; }.div_bottom_one { float:left; width:250px; }.div_bottom_two { float:right; width:250px; }....(同上).div_bottom_three { width:250px; }</style>
mozo1299 wrote:<style...(恕刪) 謝謝您,我試成功了~非常感謝~不過有一個地方蠻好奇的想再請教一下為什麼.div_top_three { float:right; width:250px; }.div_top_four { float:right; width:250px; }↑連續兩個都要用right呢? 雖然我試了兩個都right或一個left一個right都可以成功~p.s 昨天糗了忘了設到右邊最外框的寬度...難怪一直失敗...