Html CSS选项卡将高度扩展到内容

我目前面临的问题是，我希望在易趣物品上放置一个标签式内容框。目前，jQuery解决方案无法工作，因为eBay将其从代码中删除

我转向了纯css方法，但在根据内容调整标签高度时遇到了问题。（由易趣生成并插入）

这是我的css

.tabs {
  position: relative;   
  min-height: 100px;
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

行动中

---

任何帮助都将不胜感激

要做到这一点，首先需要将这两个CSS规则更改为以下内容：

[type=radio]:checked ~ label ~ .content {
  display:block;
}

这被设置为z索引，但需要更改为显示：block；因为下一步：

.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  padding: 20px;
  border: 1px solid #ccc; 
  display:none;
  min-width:700px;
}

移除

底部：0和<代码>右侧：0和加载项
显示：无和
最小宽度：700px。
这就是所需要的一切！它将根据内部文本的大小自动更改高度。



希望这有帮助
 要做到这一点，首先需要将这两个CSS规则更改为以下内容：

[type=radio]:checked ~ label ~ .content {
  display:block;
}

这被设置为z索引，但需要更改为显示：block；因为下一步：

.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  padding: 20px;
  border: 1px solid #ccc; 
  display:none;
  min-width:700px;
}

移除
底部：0和<代码>右侧：0和加载项
显示：无和
最小宽度：700px。
这就是所需要的一切！它将根据内部文本的大小自动更改高度。



希望这有帮助
 如果我需要做相反的事情呢？我的意思是设置标签内容的高度，自动选择标签中最高的一个。实际上，我正在使用jQuery脚本处理与上面相同的内容，而不仅仅是CSS。当然，我不想输入最小高度值，因为这些选项卡是在和Android应用程序中显示的网络视图的一部分，所以屏幕大小始终为different@brainvision你应该就你的问题写一个单独的问题。之后请随意在这里发布，我会看一看：）@JacobGray这是我的要求，这个绿色区域需要扩展标签内容，请帮助我，这是我的工作演示如果我需要做相反的事情呢？我的意思是设置标签内容的高度，自动选择标签中最高的一个。实际上，我正在使用jQuery脚本处理与上面相同的内容，而不仅仅是CSS。当然，我不想输入最小高度值，因为这些选项卡是在和Android应用程序中显示的网络视图的一部分，所以屏幕大小始终为different@brainvision你应该就你的问题写一个单独的问题。之后请随意在这里发布，我会看一看：）@JacobGray这是我的要求，这个绿色区域需要扩展标签内容，请帮助我，这是我的工作演示