基金會6中的堆棧

-2

我試圖在基金會6中實現某些功能，但無法弄清楚。這是一張圖解說明我的問題。基金會6中的堆棧

我做的！對不起，:) :)

<!-- Signup/Login/FAQ/Social --> 
<div class="row"> 

    <!-- Left Side --> 
    <div class="large-4 medium-4 columns Rem1MarginBottom hide-for-small-only"> 
     <!-- Have a friend--> 
     <h4 class="georgiaNormal">Text Column</h4> 
    </div> 
    <div class="large-2 medium-2 columns" style="border: 1px solid;"> 
     <h4 class="georgiaBold"><a href="#">Link 1</a></h4> 
    </div> 
    <div class="large-2 medium-2 columns" style="border: 1px solid;"> 
     <h4 class="georgiaBold"><a href="#">Link 2</a></h4> 
    </div> 
<!-- Left Side --> 

<!-- Right Side --> 
    <div class="large-4 medium-4 columns"> 
     <div class="row" style="border: 1px solid;"> 
      <div class="large-12 medium-12 columns hide-for-small-only"> 
       <h4 class="georgiaBoldSmall centeredRed trouble">Text</h4> 
      </div> 

      <div class="large-12 medium-12 columns hide-for-small-only"> 
       <h4 class="georgiaNormalSmall centeredRed faq_contact">Text <a href="#">Link</a> page or <a href="#">Link</a>. 
</h4> 
      </div> 
      <div class="large-12 medium-12 small-12 columns Rem1MarginTop text-center Rem1MarginBottom"> 
       <img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png" width="50" alt="#" />&nbsp;<img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png" width="50" alt="#" /> 
      </div> 
    </div> 
    </div> 
    <!-- Right Side --> 
</div>

來源

2016-08-22 Geekless

嘗試向我們展示您嘗試過的內容以及您擁有的代碼。堆棧溢出不是要求代碼的地方，而是提出有關現有代碼的問題。你有代碼給我們看嗎？ –

我願意！對不起，:) :) – Geekless

只需添加代碼。 – Geekless

感謝您添加代碼。你有四列，但你真正想要的是三列，還有一些內容要堆疊在中間列。嘗試這樣做左側此給出一個嘗試：

<!-- Signup/Login/FAQ/Social --> 
<div class="row"> 

    <!-- Left Side --> 
    <div class="large-6 medium-6 columns Rem1MarginBottom hide-for-small-only"> 
     <!-- Have a friend--> 
     <h4 class="georgiaNormal">Text Column</h4> 
    </div> 
    <div class="large-2 medium-2 columns" style="border: 1px solid;"> 
     <div><!-- this div should stack now --> 
      <h4 class="georgiaBold"><a href="#">Link 1</a></h4> 
     </div> 
     <div><!-- this div will be below the other link --> 
      <h4 class="georgiaBold"><a href="#">Link 2</a></h4> 
     </div> 
    </div> 
    <!-- Left Side --> 

    <!-- Right Side --> 
    ... 
    <!-- Right Side --> 
</div>

我改的第一列是「6」寬，去掉你確實有作爲第三列（包含你的第二個鏈接的那個）。

所以現在中間的列包含兩個div，它們將堆疊在彼此之上。您可能需要添加一些自定義CSS來獲得您之後的設計，但至少現在您擁有正確的結構。

來源

2016-08-23 05:55:50

這是完美的，謝謝！我的主要目標是能夠將鏈接1連接到包含div的頂部，鏈接2連接到包含div的底部。這可以用這個解決方案在這裏完成嗎？ – Geekless

@Geekless您可以通過多種方式將鏈接固定到div的頂部或底部，但完全取決於您想要的位置和其他因素。這將超出這個問題的範圍，你應該通過其他問題在stackoverflow或在線看看如何做到這一點。如果您對答案感到滿意，那麼您可以選擇它作爲解決方案並加以解決。謝謝。 –

基金會6中的堆棧

回答

相關問題