Re: [問題] css兩欄式排版問題

看板Web_Design作者terlin10 (小Ya)時間15年前 (2011/01/08 12:32)推噓2(2推 0噓 6→)

留言8則, 3人參與討論串2/2 (看更多)

※ 引述《ooopooo (歐歐歐批歐歐歐)》之銘言： : http://www.jsfiddle.net/onesan/MYNEj/ : 如網頁所呈現 : 我想達到的版型如下 : ╭────────╮ : │┌────┐╭╮│ : ││╭──╮││││ : │││ │││││ : │││ │││││ : ││╰──╯││││ : │└────┘╰╯│ : ╰────────╯ : : 標籤命名： : 最外框（紅） #all : 左半部(粉紅) #leftside : 左半部內容(綠) #inside : 右半部(藍) #rightside : 請問為什麼當我把 #leftside 的margin-right 設定成負的 #rightside 寬度 : 才能顯示正常？ : 可否解釋一下為何跟我的認知不太一樣負的不是應該要在螢幕外嗎？怎麼是內縮了？ : 感謝各位熱心解答～ #all {width: 500px; height:200px;border: 5px solid red; } #leftside {width:100%; height:200px; margin-right: 100px; float:left; background-color: #C0F; } #inside { width: 400px; margin-right: 100px; height: 200px; background-color: #6C0; } #rightside{ height: 200px; width: 100px; float: right; background-color: #00F;} p{ text-align:center; margin-top:20px; } 首先你最外層(#all)的寬度設為500px，#leftside的寬度卻設為100% 這種情況下，#leftside的寬度100% = 500px 所以#rightside很自然的就會被推到下面去了當然#leftside的margin-right也是多餘的這時候#leftside和#rightside的寬度要嘛設固定值(ex:300px,200px) 要嘛設百分比(ex:80%, 20%)，總之不要讓固定值或百分比超過#all的寬度以上修改好之後，會發現#inside的區塊往下掉了這是因為你所有的欄位都把高度寫死了，包含#inside本身也是這時候你的P不應該是設margin-top而是要設padding-top才對補充一下 http://www.jsfiddle.net/MYNEj/30/ 其實看了一下，css很多觀念你還不是很清楚可以多多上網查資料和找書本來看你發問的方式也很不錯，多問多學進步才會快~ 以上！若有錯誤敬請多多包涵和指教謝謝 -- ╭──╮╭╮ ╰┐┌╯││ 低調才是王道 ││er│╰╮in~☆ ╰╯ ╰─╯ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 112.104.21.27 ※ 編輯: terlin10 來自: 112.104.21.27 (01/08 12:35)

→

superpai

01/08 12:36, , 1^F

01/08 12:36, 1^F

→

terlin10

01/08 12:37, , 2^F

01/08 12:37, 2^F

→

superpai

01/08 12:37, , 3^F

01/08 12:37, 3^F