Html zurb基础:垂直将容器与截面底部对齐

Html zurb基础:垂直将容器与截面底部对齐,html,css,zurb-foundation-6,Html,Css,Zurb Foundation 6,我确实需要一些帮助。我想将.行与节的底部对齐。您在下图中看到的三个容器需要位于底部。我不能使用“固定”或“粘性”,因为它们不应该是固定的。我使用fullpage.js从一节滚动到另一节。“菜单”位于页面末尾的第三部分 当我使用position:absolute时,容器将不再在列中居中。 当我使用display:table时,我在第二列和第三列之间得到1px的gab 有人知道我如何解决这个问题吗 提前谢谢你 这是它现在的样子 这就是我想要的样子 这是我使用的html <!--

我确实需要一些帮助。我想将.行与节的底部对齐。您在下图中看到的三个容器需要位于底部。我不能使用“固定”或“粘性”,因为它们不应该是固定的。我使用fullpage.js从一节滚动到另一节。“菜单”位于页面末尾的第三部分

当我使用position:absolute时,容器将不再在列中居中。 当我使用display:table时,我在第二列和第三列之间得到1px的gab

有人知道我如何解决这个问题吗

提前谢谢你

这是它现在的样子

这就是我想要的样子

这是我使用的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>

我是格斗者
  • 卡里埃
所有这些都在
指间
  • RK 67
雷纳和浪漫主义者
  • SCHORSCH

现在还不清楚这应该是什么样子。像这样的-?或多或少这就是我的意思。我会尝试用flex来做。但在较旧的浏览器版本中,这是否也会正确呈现?块应在页面的上边缘对齐,但在页面的下1/3处对齐。我将尝试发布我的意思的预览。它成功了!我给了这个盒子300像素的高度。现在,h4标题在.box容器顶部对齐。谢谢你的帮助!