sidebar掉到最下面 - 部落格

By Jessica
at 2009-10-07T22:38
at 2009-10-07T22:38
Table of Contents
你的#outer-wrapper只有850
文章區塊+側欄已經用掉750
剩下的100px呢
其中50px給了文章區塊的margin (左右各25px)
另外的50px給了側欄的margin (同上)
就用光了
所以增加margin之後就掉下去啦~~~
請直接加大#outer-wrapper再來動margin囉
其實也不用都由margin來控制邊界距離
padding的補白作用也可以有類似的效果
※ 引述《lockes (少女愛情丸子串。)》之銘言:
: http://lux-test.blogspot.com/
: 這是我blog的版型 (現在這是正常狀況)
: 左邊主要資訊列和右邊的sidebar之間明明還有蠻大的差距
: 但是我只要再左右兩邊多加一點寬度,
: 不過左右增加的寬度都還小於兩列中間的寬度
: 可是sidebar整列就會被擠到最下面
: 以下是我這是我設定的數值...
: 有高手能幫我看看問題出在哪嗎?
: /* Outer-Wrapper
: ----------------------------------------------- */
: #outer-wrapper {
: width: 850px;
: margin:0 auto;
: padding:0px;
: text-align:$startSide;
: font: $bodyfont;
: }
: #main-wrapper {
: width: 500px;
: margin: 25px; <--我想設定30px,但sidebar就被擠到下方去了
: float: left;
: word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
: overflow: hidden; /* fix for long non-text content breaking IE sidebar
: float */
: }
: #sidebar-wrapper {
: width: 250px;
: margin: 25px; <--我想設定30px,但sidebar就被擠到下方去了
: float: right;
: word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
: overflow: hidden; /* fix for long non-text content breaking IE sidebar
: float */
: }
--
文章區塊+側欄已經用掉750
剩下的100px呢
其中50px給了文章區塊的margin (左右各25px)
另外的50px給了側欄的margin (同上)
就用光了
所以增加margin之後就掉下去啦~~~
請直接加大#outer-wrapper再來動margin囉
其實也不用都由margin來控制邊界距離
padding的補白作用也可以有類似的效果
※ 引述《lockes (少女愛情丸子串。)》之銘言:
: http://lux-test.blogspot.com/
: 這是我blog的版型 (現在這是正常狀況)
: 左邊主要資訊列和右邊的sidebar之間明明還有蠻大的差距
: 但是我只要再左右兩邊多加一點寬度,
: 不過左右增加的寬度都還小於兩列中間的寬度
: 可是sidebar整列就會被擠到最下面
: 以下是我這是我設定的數值...
: 有高手能幫我看看問題出在哪嗎?
: /* Outer-Wrapper
: ----------------------------------------------- */
: #outer-wrapper {
: width: 850px;
: margin:0 auto;
: padding:0px;
: text-align:$startSide;
: font: $bodyfont;
: }
: #main-wrapper {
: width: 500px;
: margin: 25px; <--我想設定30px,但sidebar就被擠到下方去了
: float: left;
: word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
: overflow: hidden; /* fix for long non-text content breaking IE sidebar
: float */
: }
: #sidebar-wrapper {
: width: 250px;
: margin: 25px; <--我想設定30px,但sidebar就被擠到下方去了
: float: right;
: word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
: overflow: hidden; /* fix for long non-text content breaking IE sidebar
: float */
: }
--
Tags:
部落格
All Comments

By Tracy
at 2009-10-08T01:07
at 2009-10-08T01:07

By Connor
at 2009-10-08T19:55
at 2009-10-08T19:55

By Todd Johnson
at 2009-10-11T08:48
at 2009-10-11T08:48

By Hedy
at 2009-10-14T18:03
at 2009-10-14T18:03

By Eden
at 2009-10-15T22:30
at 2009-10-15T22:30

By Tristan Cohan
at 2009-10-16T12:00
at 2009-10-16T12:00

By Hedy
at 2009-10-18T03:28
at 2009-10-18T03:28

By Oliver
at 2009-10-20T00:22
at 2009-10-20T00:22
Related Posts
Facebook、微網誌、網路使用習慣大調查

By Mia
at 2009-10-07T19:20
at 2009-10-07T19:20
如何訂閱不提供 RSS 訂閱的網站 ??

By Thomas
at 2009-10-07T17:48
at 2009-10-07T17:48
部落格為產品見證 涉廣告不實 仍可能違法

By Agatha
at 2009-10-07T16:17
at 2009-10-07T16:17
RSS、文章自動轉貼 ??

By Quintina
at 2009-10-07T16:13
at 2009-10-07T16:13
如何設定下拉式選單?

By David
at 2009-10-07T16:03
at 2009-10-07T16:03