基金会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中的堆栈

回答

相关问题