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