我正在开发一个我正在开发的网络应用程序的问题,它有几个标签用于各种内容。问题是,标签不会增长以包装整个内容。
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动态生成的。我需要能够根据需要生成任意选项卡的灵活性,因此选项卡的CSS不能包含任何特定于任何给定选项卡的内容。
我玩过位置:亲戚;和浮动:...;这些不可避免地打破了标签布局。此外,如果我只是删除包装内容的内部,布局也会中断(尽管选项卡确实增长到内部的内容)。我快速耗尽了想法,非常感谢一些建议!谢谢!
答案 0 :(得分:0)