CSS - 避免绝对定位导致文本流失效

Question

CSS - 避免绝对定位导致文本流失效

4

我希望您能够帮忙翻译以下中文内容：这是一个关于编程的问题，我想创建一个只使用 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;
}

- wutax

2个回答

1

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

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

自己看看 - 工作示例 我从

标签中删除了/元素，并将它们移动到<.main>元素的根目录。现在，它们是元素，以避免折叠问题，而不是浮动的

元素。此外，我无法使用广义属性选择器，例如[id^=tab-content]，而必须将它们更改为特定的选择器。这有点多余，但由于标记更改，在这种情况下不幸需要这样做。这有效，因为不再有任何绝对定位的元素。

更新后的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;
}

- Josh Crozier

1

太棒了，这正是我在寻找的！非常感谢！ - wutax

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

这里有两个问题。 FIDDLE 首先，你的ul列表项是向左浮动的。这意味着该列表没有高度。

解决方法：在ul中添加清除浮动。

<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 */
}