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

[terlin10 (小Ya)]

※ 引述《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:#leftside的margin-right不是沒有意義的
→ terlin10:沒錯~感謝補充~
→ superpai:他這樣寫才能左邊寬度隨父div自有變化 右邊固定寬度
→ terlin10:喔喔，對！我之前剛寫過，一時也沒想到他是要這樣寫~@@
→ terlin10:那我回這篇算是多的了~等等刪掉~先去吃飯~XD
→ terlin10:嗯…還是不要刪好了~XD
推 ooopooo:謝謝superpai幫我補充 終於有人聽懂我的描述XD
推 ooopooo:看來大家對負margin 的寫法好像都....XD