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

2019年8月4日 180次阅读

我正在尝试使用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;
}

最佳答案 如果您知道包含元素的高度,您显然可以在父元素上设置高度,并避免与绝对定位元素的折叠问题.这不是很理想,因为它应该与动态内容一起使用.

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

亲自看看 – Working example

我从li标签中删除了输入/标签元素,并将它们移动到.main元素的根目录.它们不是浮动li元素,而是现在的内联块元素,以避免崩溃问题.另外,我无法使用通用属性选择器,例如[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;
}
点赞