Question

我正在尝试使用CSS创建制表机系统。到目前为止它工作正常，但内容框的绝对定位将不允许我在底部添加更多div。有什么方法可以解决这个问题吗？我知道绝对定位的对象通常不会影响文本流，但是你仍然可以实现吗？

HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Tabs</title>
        <link rel="stylesheet" type="text/css" href="menutabs.css" />
        </style>
    </head>
    <body>
        <div class="main">
            <ul class="tabs">
                <li>
                      <input type="radio" checked name="tabs" id="tab1">
                      <label for="tab1">One</label>
                      <div id="tab-content1" class="tab-content animated fadeIn">
                        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                      </div>
                </li>
                <li>
                      <input type="radio" name="tabs" id="tab2">
                      <label for="tab2">Two</label>
                      <div id="tab-content2" class="tab-content animated fadeIn">
                      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                      </div>
                </li>
                <li>
                      <input type="radio" name="tabs" id="tab3">
                      <label for="tab3">Three</label>
                      <div id="tab-content3" class="tab-content animated fadeIn">
                      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                      </div>
                </li>
            </ul>
            <div>
                <p class="sample">Sample Text</p>
            </div>
        </div>
    </body>
</html>

CSS文件：

.main {
    width: 80%;
    margin: 0px auto;
}

.tabs input[type=radio] {
    position: absolute;
    visibility: hidden;
}
.tabs {
    list-style: none;
    position: relative;
    padding: 0;
}
.tabs li{
    float: left;
}
.tabs label {
    display: block;
    padding: 10px 20px;
    color: #585;
    font-size: 24px;
    background: rgba(255,255,255,0.2);
}
.tabs label:hover {
    background: rgba(60,90,60,0.2);
}

[id^=tab]:checked + label {
    background: #585;
    color: white;
}

[id^=tab]:checked ~ [id^=tab-content] {
    display: block;
}
.tab-content{
  display: none;
  background: #585;
  padding: 5px;
  color: white;
  position: absolute;
  left: 0;
}

.sample {
    background-color: #585;
    color: white;
    text-align: center;
}

Answer 1

这里有两个问题。

<强> FIDDLE

首先，ul中的列表项向左浮动。这意味着列表没有高度。

修复：向ul。添加cleafix。

<ul class="tabs clearfix">

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

第二：要克服绝对定位的内容 - 只需在后面的div中添加一个margin-top。

当然 - 只有事先了解内容的高度（感谢@JoshC）

才会有效。

如果你不知道身高 - 那么我认为你只需要重新设计你的标记。快速解决方法是将额外的div添加到内容本身。

.sample {
    background-color: #585;
    color: white;
    text-align: center;
    margin-top: 90px; /* height of content */
}

Answer 2

如果您知道包含元素的高度，您显然可以在父元素上设置高度，并避免使用绝对定位元素的折叠问题。但这并不是很理想，因为它应该适用于动态内容。

使用当前编码，这可以通过一点JavaScript来解决，但是如果你想避免使用JS，解决方案就是删除绝对定位并更改标记。

亲眼看看 - Working example

我从input标签中删除了label / li元素，并将其移至.main元素的根目录。它们不是浮动li元素，而是现在inline-block元素，以避免崩溃问题。此外，我无法使用通用属性选择器，例如[id^=tab-content]，而是我必须将它们更改为特定的id选择器。这有点多余，但遗憾的是，由于标记更改，在这种情况下需要它。这是有效的，因为不再有任何绝对定位的元素。

更新了HTML

<div class="main">
   <input type="radio" name="tabs" id="tab1" checked>
   <label for="tab1">One</label>
   <input type="radio" name="tabs" id="tab2">
   <label for="tab2">Two</label>
   <input type="radio" name="tabs" id="tab3">
   <label for="tab3">Three</label>
   <ul class="tabs">
      <li>
         <div id="tab-content1" class="tab-content animated fadeIn">TAB1</div>
      </li>
      <li>
         <div id="tab-content2" class="tab-content animated fadeIn">TAB2</div>
      </li>
      <li>
         <div id="tab-content3" class="tab-content animated fadeIn">TAB3</div>
      </li>
   </ul>
   <div>
      <p class="sample">Sample Text</p>
   </div>
</div>

更新了CSS

.main {
    width: 80%;
    margin: 0px auto;
}
.tabs {
    list-style: none;
    position: relative;
    padding: 0;
}
.tabs li {
    display:inline-block;
}
[id^=tab]:checked + label {
    background: #585;
    color: white;
}
#tab1:checked ~ .tabs li #tab-content1 {
    display: block;
}
#tab2:checked ~ .tabs li #tab-content2 {
    display: block;
}
#tab3:checked ~ .tabs li #tab-content3 {
    display: block;
}
.tab-content {
    display: none;
    background: #585;
    padding: 5px;
    color: white;
}
.sample {
    background-color: #585;
    color: white;
    text-align: center;
}
label {
    padding: 10px 20px;
    color: #585;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.2);
    float:left;
    position:relative;
    z-index:1;
}
label:hover {
    background: rgba(60, 90, 60, 0.2);
    cursor:pointer;
}
input[type=radio] {
    display:none;
}

CSS - 避免在绝对定位时删除文本流

2 个答案: