Foundation 6 中的堆栈

Question

我试图在 Foundation 6 中取得一些成就，但我无法弄清楚。这是说明我的问题的图表。

Graphic of what I'm trying to do

我愿意！对此感到抱歉:)

<!-- 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>

Answer 1

感谢您添加代码。 您拥有的是四列，但您真正想要的是三列并且一些内容堆叠在中间列中。 尝试在左侧这样做尝试一下：

<!-- 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 来获得您所追求的设计，但至少现在您拥有正确的结构。