html - CSS 标签不随内容增长

Question

我正在开发的网络应用程序有一个问题，该应用程序有多个选项卡用于各种内容。问题是，选项卡没有增长以包裹整个内容。

CSS 代码在这里:

.w3c {
height: auto;
min-height: 250px;
position: relative;
width: 100%;
}
    .w3c > div {
        display: inline;
    }
    .w3c > div > a {
        margin-left: -1px;
        position: relative;
        left: 1px;
        text-decoration: none;
        color: black;
        background: white;
        display: block;
        float: left;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-bottom: 1px solid white;
    }
    .w3c > div:not(:target) > a {
        border-bottom: 0;
        background: -moz-linear-gradient(top, white, #eee);
    }
    .w3c > div:target > a {
        background: white;
    }
    .w3c > div > div {
        background: white;
        z-index: -2;
        left: 0;
        top: 30px;
        bottom: 0;
        right: 0;
        padding: 20px;
        border: 1px solid #ccc;
    }                      
    .w3c > div:not(:target) > div {
        position: absolute;
    }
    .w3c > div:target > div {
        position: absolute;
        z-index: -1;
    }

我在这里建立了一个模型:http://jsfiddle.net/diehlada/tx81he5s/

实际页面的页面(包括选项卡和相关内容)是使用 Catalyst 和 Template Toolkit 即时生成的。我需要能够按需生成任意选项卡的灵 active ，因此选项卡的 CSS 不能包含特定于任何给定选项卡的任何内容。

我玩过 position: relative;和 float :......;这些不可避免地会破坏选项卡布局。此外，如果我简单地删除包裹内容的内部，布局也会中断(尽管选项卡确实增长到内容内部)。我的想法很快就用完了，非常感谢一些建议!谢谢!

Answer 1

我认为您可能需要更改尝试创建选项卡的方式。我建议，你应该使用 jquery 选项卡。

https://jqueryui.com/tabs/

这是最简单的方法。

希望对你有所帮助。