Question

希望你们都做得很好。

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

虽然zurb非常棒，但我仍坚持创造这种设计，我相信它可以做到。

基本上我要做的是拥有一个转发文本，这是＆＃34; bar＆＃34; id，即使尺寸发生变化，也会保持在它的位置。

目前文字＆＃34; small-block-grid-5 span＆＃34;正在自由行动。

我已经为你的参考做了一个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;
}

感谢您的时间，并期待学到新的东西!!

亲切的问候， ž。

Answer 1

我嘲笑了你可以使用的东西。

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

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

我没有打算删除最后一个borther，但你可以用：nth声明来做。

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

Zurb Foundation响应文本在图像上方

1 个答案: