主營兒童分區定位

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

祝你好運！