zurb-foundation：垂直对齐容器到部分底部

Question

我确实需要一些帮助。我想将.row对齐到一个部分的底部。您在下图中看到的三个容器需要位于底部。我无法使用＆＃34;固定＆＃34;或＆＃34;粘＆＃34;因为他们不应该。我使用fullpage.js从一节到另一节滚动。 ＆＃34;菜单＆＃34;在页面末尾的第三部分。

当我使用position：absolute时，容器将不再在列中居中。 当我使用display：table时，我在第二列和第三列之间获得了1px的点数。

有人有想法如何解决这个问题？

提前谢谢！

以下是它现在的样子

这就是我想要的样子。

这是我用过的html。

      <!-- Main Menu -->
      <div class="section home row" data-anchor="Menu" >

          <div class="small-4 columns" id="main-nav-ka" data-wow-duration="1s" data-wow-delay="0.4s">
            <h3>IM GEIST<br>WIE<br>GLADIATOREN</h3>
            <!-- Nav Boxen position bottom -->
            <div class="box row">
              <ul class="box-inner">
                <li><h4 class="kapitel serif">KARRIERE</h4><hr></li>
                <li><a href="gelaendesport.html">GEL&Auml;NDESPORT</a></li>
                <li><a href="#">KREIDLER</a></li>
                <li><a href="#">SUZUKI</a></li>
              </ul>
            </div>

          </div>
          <div class="small-4 columns" id="main-nav-rk" data-wow-duration="1s" data-wow-delay="0.6s">
            <h3>ALLES IN<br>EINEM<br>FINGERHUT</h3>
            <!-- Nav Boxen position bottom -->
            <div class="box row">
              <ul class="box-inner">
                <li><h4 class="kapitel serif">RK 67</h4><hr></li>
                <li><a href="#">TECHNIK</a></li>
              </ul>
            </div>

          </div>
          <div class="small-4 columns" id="main-nav-sh" data-wow-duration="1s" data-wow-delay="0.8s">
            <h3>RENNER<br>UND<br>ROMANTIKER</h3>
            <!-- Nav Boxen position bottom -->
            <div class="box row">
              <ul class="box-inner">
                <li><h4 class="kapitel serif">SCHORSCH</h4><hr></li>
                <li><a href="#">LEBEN &amp; FAMILIE</a></li>
                <li><a href="#">BUCH</a></li>
                <li><a href="#">KONTAKT</a></li>
              </ul>
            </div>

          </div>
      </div>