你的#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 */
: }
--
All Comments