0

我无法找到解决我的问题的方法。

我正在处理页面的页脚。从左到右在一行中，有一个免责声明 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 图标位于同一跨度中，而不是嵌套网格中的单独跨度。这样做可以解决台式机和智能手机窗口大小的问题，但不能解决平板电脑的问题。

为了解决平板电脑问题，我将两个图标包装在一个类中，我强制它具有最小宽度：

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 回答