主营儿童分区定位

Question

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

我正在页面的页脚上工作。在单行中从左到右，有一个免责声明div，然后是包含FaceBook和Twitter按钮的父div。

（蓝〜免责声明格，粉红〜父格，红〜Twitter的按钮的颜色; Facebook的按钮，没有一个单独的颜色）。
目标是Twitter按钮始终位于FaceBook按钮的右侧。

免责声明div设置为最小尺寸（页面使用的是Twitter Bootstrap），因此当它调整到足够小时，按钮的父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上。
任何想法？并提前感谢！

Answer 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 */ 
} 

祝你好运！