Question

我目前正试图将我在NAV中作为UL布局的块元素居中，因此每个块元素都是一个包含子元素的LI。

这是我第一次使用F4或基金会。

我一直在使用.container用于新的100％全宽div，在那些我使用的行中（但是每行也有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）时，背景容器（也具有灰色的颜色））当被推下的其他元素时，它不会自动升高。

我一直在努力工作几个小时，真的需要一些帮助。

非常感谢任何建议。

感谢。

Answer 1

试试这个：

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>

减少浏览器窗口大小时，容器上的基础4自动高度

1 个答案: