Question

我正在努力在基金会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>

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>

我将第一列更改为＆＃39; 6＆＃39;广泛并删除你所拥有的第三列（包含你的第二个链接的那个）。

所以现在中间列包含两个div，它们将叠加在一起。您可能需要添加一些自定义css来获取您之后的设计，但至少现在您拥有正确的结构。

在基金会6堆栈

1 个答案: