DIV網頁排版問題~~ (已解決)

各位大大好,小弟最近要製作產品列表頁~因為想用到自動排版功能~所以要用DIV方式排版~
想要排出的版型如下圖
DIV A為MENU 固定在左~
DIV B為分類抬頭~固定在每個產品列表區塊的上方
DIV C為產品簡介~依下圖方式分佈~因有可能數量為單數~故有可能空一區~ (空的那區再用一個空的DIV C 補上也可)
DIV網頁排版問題~~ (已解決)
而目前小弟能製做出下圖的樣式
DIV網頁排版問題~~ (已解決)
但是多放一個DIV C後卻變成下圖
DIV網頁排版問題~~ (已解決)
請問可能是哪方面的設定出了問題呢?

因小弟希望在畫面縮小時自動變成底下排列方式,所以大概無法用TABLE方式排版 (P.S此部份沒有問題,問題在上一個步驟)
DIV網頁排版問題~~ (已解決)
2015-04-14 13:55 發佈
<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:
&lt;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:
&lt;style...(恕刪)


謝謝您,我試成功了~非常感謝~
不過有一個地方蠻好奇的想再請教一下
為什麼
.div_top_three { float:right; width:250px; }
.div_top_four { float:right; width:250px; }

↑連續兩個都要用right呢? 雖然我試了兩個都right或一個left一個right都可以成功~

p.s 昨天糗了忘了設到右邊最外框的寬度...難怪一直失敗...
內文搜尋
X
評分
評分
複製連結
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?