0

私は友人のためにワードプレスのテーマに取り組んでいて、相対/絶対位置を使用していくつかのdivの横にソーシャル/接続ボタンを追加していることに最近気づいたという本当に奇妙な問題があります-これはうまく機能します適切な設計を取得します。

ただし、問題はページの右側にある「ソーシャル」div で発生します。ブラウザがメイン コンテンツのサイズよりも小さい場合、ページの右側に余分な空白が追加されます。div を左側に移動しても問題ありません。ページの長さの約半分に空白を追加するだけです (これはさらに混乱を招きます)。

なぜこれが起こっているのか、一生わかりません。それが標準的な動作なのか、自分で作成した問題なのかわかりません。

ここにいる誰かが同じような経験をしたり、それを修正する方法を知っているかもしれないと思っていました.

#social div の CSS は次のとおりです。

#social{
   width: 90px; height: 250px;
   padding: 10px;
   position: absolute; right: -40px; top: 40px;
   background: #EFEFEF;
   box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}

それが存在する #page-content div の CSS は次のとおりです。

#page-content{
   clear: both;
   min-height: 500px;
   width: 870px;
   margin: 0 auto;
   padding: 20px 0;
   position: relative;
   border: 5px solid #FFF;
   background: #F2F0D7;}

スクリーンショットは次のとおりです。
問題

そこまでの幅は、ブラウザの幅が 960px (コンテンツの幅) 未満の場合にのみ存在します。

4

2 に答える 2

1

あなたのサイトを見た後、それはあなたのソーシャル パネルのように見えます。生成された要素の中には、幅が 100px 以上のものがあります。を削除するwidth:90px;と、達成しようとしている幅がわかります。overflow: hidden;これらの要素を修正して、幅を小さく (または 100% などに) 設定するか、#socialdivに適用することができます。

#social {
    ...
    overflow:hidden;
}

これが発生する理由は、ソーシャル コンテナーからオーバーフローしたためです。これらの要素は左揃えであるため、右側でのみ発生します。（要素を右に揃えることもできます。）

うまくいけば、それは役に立ちます。

于 2013-02-16T03:13:28.473 に答える
0

私が理解している限り、テンプレートをレスポンシブにしたいと考えています。そのためには、さまざまなメディア サイズと解像度に対応するメディア クエリを作成する必要があります。

    /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

さまざまなサイズの CSS スタイリングを作成すると、Web サイトの外観を思い通りにすることができます。

于 2013-02-16T03:08:27.013 に答える