2

希望你们都做得很好。

我是 zurb 基金会的新手，非常喜欢响应式框架及其设计的可能性！

虽然 zurb 很棒，但我仍然坚持创建这个设计，我相信它可以完成。

基本上我想做的是有一个响应文本，它是“栏”id的一部分，即使大小发生变化，它也会保持在它的位置。

目前文本“small-block-grid-5 span”正在自由移动。

我已经做了一个 jsFiddle 供您参考，并且在代码的最底部我提供了我想要实现的最终外观。http://jsfiddle.net/mrzoogle/pmYVQ/2/

HTML

    <div class="row">
    <div class="large-8 columns">
        <h3>Lorem ipsum</h3>

        <div class="row">
            <div class="large-12 columns">
                <div class="panel">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                     <h1><a href="#"><img id="mn-image" src="http://www.mediafire.com/convkey/df9e/0a3gam4mjjf2e31bg.jpg?size_id=5" alt="testimage"> </a></h1>

                    <div class="img-wrap">
                         <h1 style="margin-bottom:-15px;"><a href="#"><img id="bar" src="http://www.mediafire.com/convkey/b77f/ouskaxv6jo2c925bg.jpg?size_id=5" alt="testbar"/></a></h1>

                        <ul class="small-block-grid-5">
                            <li><span class="placeholder">Hi</span><strong>Text1</strong>

                            </li>
                            <li><span class="placeholder">HiHi</span><strong>Test2</strong>

                            </li>
                            <li><span class="placeholder">Hi</span><strong>Test3Test3</strong>

                            </li>
                        </ul>
                        <img src="http://www.mediafire.com/convkey/9690/6j1vy7zs7h5qibobg.jpg?size_id=2">
                    </div>
                     <h1>Final Result</h1>
                   <img src="http://www.mediafire.com/convkey/6e43/063qj9wij0cd0babg.jpg?size_id=6">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

    .panel h1{
    width: 100%;
}

.img-wrap h1{
    width: 100%;
}

.img-wrap {
    position: relative;
    width: 100%;
    img {
        position: relative;
        bottom: 40px;
    }
    ul {
        position: absolute;
        top: -40px;
        left: 0px;
        width: 100%;
    }
    ul span {
        color: white;
        font: bold 20px/45px helvetica, Sans-Serif;
        letter-spacing: -1px;
    }
}
.small-block-grid-5 strong {
    display: block;
    font-size:23px;
    line-height:52px;
}
.small-block-grid-5 li {
    text-align: center;
}

感谢您的时间，并期待学习新的东西！

亲切的问候，Z。

4

1 回答 1

0

我已经模拟了一些你可以使用的东西。

为了复制您的设计，我将使用 CSS3 中的渐变功能，并为不支持它的浏览器回退到纯色。

然后你只剩下浮动 li 并向它们添加一个 1px 的右边框。

我没有为删除最后一个兄弟而烦恼，但是您可以使用 :nth 声明来做到这一点。

这是一个快速的代码笔。- http://codepen.io/justincavery/full/qdokp

于 2013-12-12T13:57:30.180 回答