1

サイドバーに問題があります。私が今コーディングしているデザインでは、サイドバーがサイトのヘッダーとわずかに重なっています-意図的に。ただし、問題は、間違った方法を使用して実行する可能性があることです。

サイドバーはフッターと並んでいるはずですが、私が使用しているのは：

#sidebar {
    width: 270px;
    position: relative;
    left: 690px;
    bottom: 125px;

これらの線を使用しない場合、サイドバーは一致しますが、他の方法を見つけることができません。

コンテンツが追加されたときに現れる別の問題があります。サイドバーフレームは同じ場所にとどまりますが、サイドバーは自動的にすべてのサイドバーコンテンツをメインコンテンツと一緒にダウンさせます。

あなたがそれを見たいのであれば、私はそのページをcodepenに含めました。

http://codepen.io/anon/pen/BxpJa

助けてくれてありがとう、マイケル:)

4

3 に答える 3

1

取り除く

position: relative;
left: 690px;
bottom: 125px;

そして追加：

float: right;
margin-top: -65px; /* adjust to your needs */

次に、閉じる親の直前に<aside> フロートをクリアし</div>ます...追加：

<br style="clear: right;" />

例

これは、ブラウザ間でより一貫性があり<aside>、<footer>

于 2013-03-02T01:33:23.060 に答える
0

サイドバーがフッターと整列していない理由（つまり、フッターがサイドバーのすぐ下にあり、追加の間隔がないことを意味します）は、サイドバーを親コンテナーに対して相対的に配置しているためです。したがって、サイドバーの高さは以前と同じであり、上に移動したために高くする必要があることは考慮されません。

ラッピングする親を右にフロートさせてから、#sidebar要素に負の上部マージンを与えてみてください。

#sidebar-wrapper {
   float: right; 
}
#sidebar {
    width: 270px;
    margin-top: -125px;
    position: relative;
    background-color: #282828;
    margin-right: 20px;
    padding-bottom: 25px;
}
于 2013-03-02T01:40:55.613 に答える
0

margin-top: -125px;それ以外のbottom: 125px;

于 2013-03-02T01:50:50.567 に答える