0

問題の解決策を見つけるのに苦労しています。

ページのフッターで作業しています。1 行の左から右に、disclaimer div、次に FaceBook と Twitter ボタンを含む親 div があります。

青 ~ 免責事項 div、ピンク ~ 親 div、赤 ~ Twitter ボタンの色。 Facebookボタンには別の色がありません

(青～免責事項div、ピンク～親div、赤～twitterボタンの色。facebookボタンは別色ではない)。
目標は、Twitter ボタンを常に FaceBook ボタンの右側に配置することです。

免責事項の div は最小サイズに設定されているため (ページは Twitter Bootstrap を使用しています)、十分に小さくサイズ変更されると、ボタンの親 div は免責事項の div の下の次の行に移動されます。
私が直面している問題は、このボタンの親 div が下に移動すると、Twitter ボタンが親 div から飛び出して、FaceBook ボタンの下の列に配置されることです。

これは、問題がページ上でどのように見えるかです

フッター自体のコード:

<div class="container">
  <div id="footer" class="row">
    <div class="span9 footer-leftspan">
       <xsl:copy-of select="data/footer-content/entry/content" />
    </div>

    <div class="row">
      <div class="span3 social-media-footer">
        <div id='face' class="span1">

      <!-- FaceBook Button -->
          <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
      <img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
      </a>

    </div>

        <!-- Twitter Button -->
    <div id='twitt' class="span1">
      <a class="button-link" href="https://twitter.com/...." target="_blank">
      <img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
      </a>
    </div>

      </div>
    </div>

  </div>
</div>

任意のカラーリングを除けば、ボタンまたはその親 div に特定の CSS ルールはありません。
私はこれについて本当に何も知りません.私が見つけることができる唯一の実行可能な解決策は、ボタンを絶対または固定で配置することです.
達成を支援したい私の主な目標は、サイズ変更時に Twitter ボタンを親 div にとどまらせることです。
何か案は？そして、早々にありがとう！

4

1 に答える 1

1

これがうまくいくかどうかを確認してください： http://jsfiddle.net/panchroma/yX4ZV/

HTML を少し編集して、入れ子になったグリッド内の別々のスパンではなく、Twitter と Facebook のアイコンが同じスパンになるようにしました。これを行うと、デスクトップとスマートフォンのウィンドウ サイズの問題は解決しましたが、タブレットの問題は解決しませんでした。

タブレット用に解決するために、最小幅を強制するクラスで 2 つのアイコンをラップしました。

HTML 

<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
   <xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->

  <div class="span3 social-media-footer">


<div class="social-wrapper">
  <!-- FaceBook Button -->
      <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
  <img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
  </a>

    <!-- Twitter Button -->

  <a class="button-link" href="https://twitter.com/...." target="_blank">
  <img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
  </a>
</div><!-- close social-wrapper -->


  </div> <!-- close span3 -->
</div> <!-- close row -->


</div><!-- close container -->

CSS 

.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}

幸運を！

于 2013-02-11T13:27:16.423 に答える