Question

我正在使用此插件：https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion来创建垂直响应标签区域。我想为这个区域添加背景颜色。所以我用div＆amp;给它一个名为superdemo＆amp;的类。添加此css：

.super-demo{
        width:960px;
        margin: 200px auto 0;
        background: #FFF;
        padding:40px;
    }

这是我的HTML：

<div class="super-demo">
        <!--vertical Tabs-->
        <div id="verticalTab">
            <ul class="resp-tabs-list">
                <li>Responsive Tab 1</li>
                <li>Responsive Tab 2</li>
                <li>Responsive Tab 3</li>
                <li>Long name Responsive Tab 4</li>
            </ul>
            <div class="resp-tabs-container">
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
                </div>
                <div>
                    <p>This tab has icon in it.</p>
                </div>
                <div>
                    <p>Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.</p>
                </div>
                <div>
                    <p>d ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
                </div>
            </div>
        </div>


</div>

但奇怪的是它没有掩盖整个区域。是的，我可以设置superdemo div的高度，但我不想这样做，所以将来我可以添加尽可能多的内容＆amp;不必再次计算高度。这是实时链接：http://banglapdf.net/testit/Index.html

我该怎么办？

Answer 1

添加

overflow:hidden;

到你的包装器css ..（。super-demo类）

Answer 2

您需要在最后清除内容。

<div class="super-demo">
    <div id="verticalTab">
        <!-- your content-->
        <div style="clear:both;"><!--clear content--></div>
    </div>
</div>

如何为响应选项卡添加背景

2 个答案: