gpt4 book ai didi

html - 减小浏览器窗口大小时容器上的 Foundation 4 自动高度

转载 作者:太空宇宙 更新时间:2023-11-04 14:19:56 24 4
gpt4 key购买 nike

我目前正在尝试将我作为 UL 布置在 NAV 中的 block 元素居中,因此每个 block 元素都是一个包含子元素的 LI。

这是我第一次为此使用 F4 或 Foundation。

我一直在为新的 100% 全宽 div 使用 .container,在那些我使用行的 div 中(但是行也有每个 foundation.css 的 100% 宽度)我希望我的 LI 能够响应所以我的逻辑是添加.small-# 和 .large-# 类到 LI 本身,然后弄清楚我希望它们如何在较小的屏幕尺寸下分解和堆叠。

当我减小浏览器窗口的大小时,我的元素 (LI) 会相互堆叠,这很好,但是背景容器不会自动升高以环绕这些元素。

无论如何这是标记:

  <div class="container l-capListBg">
<div class="row capListContainer">
<nav class="capList">
<ul>
<li class="small-4 large-2 colums">
<img src="img/icon-ds.png" alt="">
<h5>Digital<br>Strategy</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, magni iure quod vel dolor excepturi.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-di.png" alt="">
<h5>Digital<br>Interactive</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, laboriosam, quibusdam sequi sint asperiores magni.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-csm.png" alt="">
<h5>Collaboration & Social Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, optio officia reiciendis laudantium atque deserunt!</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-is.png" alt="">
<h5>Infrastructure Services</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam libero aspernatur aliquid minus aperiam quos!</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-iaas.png" alt="">
<h5>Identity-As-A-Service</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil et repellendus cupiditate minus consectetur consequatur.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-ca.png" alt="">
<h5>Communications Analytics</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eius harum aliquam assumenda officiis nihil.</p>
</li>
</ul>
</nav>
</div>
</div>

这是 CSS:

.l-capListBg {
background: $lt-grey;
position: relative;
}

.capListContainer {
position: relative;
// max-width: 1000px;
// min-width: auto;
max-height: auto;
margin: 0 auto;
background: $lt-grey;
}

nav.capList {
position: absolute;
top: -50px;
left: 0;
list-style-type: none;
ul {
display: inline-block;
li {
display: inline-block;
vertical-align: top;
padding: 20px 0.5em 0;
width: 155px;
}
img {
width: auto;
height: auto;
}
h5 {
font-weight: 200;
color: $black;
height: 50px;
}
p {
font-size: 0.750em;
font-weight: $lighter;
vertical-align: top;
line-height: 1.250em;
}
}
}

基本上,当我减小浏览器窗口的大小时,LI 元素开始相互堆叠(有六个,它们最终堆叠 3 行,每行 2)背景容器(也有灰色) 不会在其他元素被向下推时自动升高。

我已经为此工作了几个小时,真的需要一些帮助。

如有任何建议,我们将不胜感激。

谢谢。

最佳答案

试试这个:

foundation block-grid

<ul small-block-grid-3 medium-block-grid-6>
<li >
<img src="img/icon-ds.png" alt="">
<h5>Digital<br>Strategy</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, magni iure quod vel dolor excepturi.</p>
</li>
<li >
<img src="img/icon-di.png" alt="">
<h5>Digital<br>Interactive</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, laboriosam, quibusdam sequi sint asperiores magni.</p>
</li>
<li >
<img src="img/icon-csm.png" alt="">
<h5>Collaboration & Social Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, optio officia reiciendis laudantium atque deserunt!</p>
</li>
<li >
<img src="img/icon-is.png" alt="">
<h5>Infrastructure Services</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam libero aspernatur aliquid minus aperiam quos!</p>
</li>
<li >
<img src="img/icon-iaas.png" alt="">
<h5>Identity-As-A-Service</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil et repellendus cupiditate minus consectetur consequatur.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-ca.png" alt="">
<h5>Communications Analytics</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eius harum aliquam assumenda officiis nihil.</p>
</li>
</ul>

关于html - 减小浏览器窗口大小时容器上的 Foundation 4 自动高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20008802/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com