Question

我无法获得一个完全定位的div，以扩展到其内部的内容大小。我有来自https://css-tricks.com/functional-css-tabs-revisited/的代码和一个小提琴https://jsfiddle.net/76360pfv/

正如你在小提琴中看到的那样，猫的图片比标签内容区域高，所以它们会被截断。我基本上希望它们扩展到图像的不同高度，底部有一些填充。

我尝试将<div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab One</label> <div class="content"> <img src="http://placekitten.com/300/400"> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Tab Two</label> <div class="content"> <img src="http://placekitten.com/300/500"> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Tab Three</label> <div class="content"> <img src="http://placekitten.com/300/600"> </div> </div> </div> .tabs { position: relative; min-height: 200px; /* This part sucks */ 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; overflow: hidden; } [type=radio]:checked ~ label { background: white; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; }设置为scp /c/path/to/file.txt user@server:/dir1/file.txt，我已经按照与我的问题类似的答案，但没有一个完成我的最终目标。也许有更好的方法来做到这一点，或者我错过了一些东西。希望有人可以帮助我。提前谢谢。

下面是我的代码：

{{1}}

Answer 1

我相信你需要让content div有一个display:inline-table来实现你想要的目标。

例如，

.content {
    background: white none repeat scroll 0 0;
    border: 1px solid #ccc;
    bottom: 0;
    display: inline-table;
    left: 0;
    overflow: hidden;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 28px;
    width: 95%;
}

<强> LIVE DEMO

希望这有帮助。

Answer 2

尝试以下解决方案（https://jsfiddle.net/76360pfv/3/）：

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  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;
  padding: 20px;
  border: 1px solid #ccc; 
  overflow: hidden;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
[type=radio]:not(:checked) ~ label ~ .content {
  display:none;
  visibility:hidden;
}

<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">Tab One</label>

    <div class="content">
      <img src="http://placekitten.com/300/400">
    </div> 
  </div>
  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">Tab Two</label>

    <div class="content">
      <img src="http://placekitten.com/300/500">
    </div> 
  </div>
  <div class="tab">
    <input type="radio" id="tab-3" name="tab-group-1">
    <label for="tab-3">Tab Three</label>

    <div class="content">
      <img src="http://placekitten.com/300/600">
    </div> 
  </div>
</div>

将绝对位置div高度扩展为内部内容的大小

2 个答案: