堆栈内存溢出
  繁体   English   中英

强制下一个内容低于可变高度 DIV

[英]Force next content to come BELOW a variable height DIV

 原文  2015-11-01 10:02:09  7   3    javascript/ jquery/ html/ css

问题描述

我有一个 CSS 驱动的选项卡控件，效果很好，每个页面都有不同的高度。

目前，下一个控件位于选项卡控件旁边，考虑到我选择的选项卡内容的可变高度，我需要将其定位在它的下方。 我也不需要固定页面高度并使用滚动条方法。

感谢任何帮助。

HTML：

<div>
    <div class="tab-control">
        <ul id="navlist" class="tabs">
            <li>
                <input type="radio" name="tabs" id="tab-1" checked="checked" />
                <label for="tab-1">First Tab</label>
                <div class="tab-content">
                    Content of Tab 1.
                </div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab-2" />
                <label for="tab-2">Second Tab</label>
                <div class="tab-content">
                    Line 1 - Tab 2.<br />
                    Line 2 - Tab 2.<br />
                    Line 3 - Tab 2.<br />
                    Line 4 - Tab 2.<br />
                    Line 5 - Tab 2.<br />
                    Line 6 - Tab 2.<br />
                    Line 7 - Tab 2.<br />
                    Line 8 - Tab 2.<br />
                </div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab-3" />
                <label for="tab-3">Third Tab</label>
                <div class="tab-content">
                    Content of Tab 3.
                </div>
            </li>
        </ul>
    </div>

    <div>
        This should come below the tab control.
    </div>
</div>

CSS：

.tab-control {
    clear:both;
    width:700px;
    background-color:#0ff;
}

.tabs {
    list-style-type:none;
    padding:0;
    margin:0;
    position:relative;
    width:100%;
}

.tabs li {
    float: left;
}

.tabs li > input {
    display: none;
}

.tabs li > label {
    display: inline-block;
    border: 1px solid #02606d;
    padding: 10px 20px;
    height:10px;
    line-height:10px;
    border-right-width:0px;
    border-bottom-width:0px;
    border-top-left-radius: 7px;
    border-top-right-radius:7px;
    cursor:pointer;
}

.tabs li:last-child > label {
    border-right-width:1px;
}

.tabs .tab-content {
    display: none;
    position:absolute;
    left:0;
    padding:5px;
    width:100%;
    border: 1px solid #000;
}



.tabs li > input:checked + label {
    background-color: #eee;
}

.tabs li > input:checked  ~  .tab-content {
    display: block;
}

3 个解决方案

解决方案1
 1 已采纳  2015-11-01 13:16:00

这是我的看法。 我重组了 html： input 、 label和.tab-content是彼此的兄弟。 您还需要将相关的 tab-id 添加到包含内容的 div 的类中。 

 input { display: none; } .tab-content { display: none; border: 1px solid black; } input:checked + label { background: #ccc; /* We can target the activated tab label */ } /* display only the relevant tab-content */ input[id=tab-1]:checked ~ div[class~=tab-1], input[id=tab-2]:checked ~ div[class~=tab-2], input[id=tab-3]:checked ~ div[class~=tab-3]{ display: block; }
 <div class="tab-control"> <input type="radio" name="tabs" id="tab-1" checked="checked" /> <label for="tab-1">First Tab</label> <input type="radio" name="tabs" id="tab-2" /> <label for="tab-2">Second Tab</label> <input type="radio" name="tabs" id="tab-3" /> <label for="tab-3">Third Tab</label> <div class="tab-content tab-1"> <!-- Note the tab-1 in the class --> Content of Tab 1. </div> <div class="tab-content tab-2"> <!-- Note the tab-2 in the class --> Line 1 - Tab 2.<br /> Line 2 - Tab 2.<br /> Line 3 - Tab 2.<br /> Line 4 - Tab 2.<br /> Line 5 - Tab 2.<br /> Line 6 - Tab 2.<br /> Line 7 - Tab 2.<br /> Line 8 - Tab 2.<br /> </div> <div class="tab-content tab-3"> <!-- Note the tab-3 in the class --> Content of Tab 3. </div> </div> <div> This should come below the tab control. </div>

解决方案2
 0  2015-11-01 10:21:07

试试这个：HTML 代码：

<div class="below-Tab">
        This should come below the tab control.
</div>

CSS代码

 .below-Tab{
      border:1px solid black;
      position:absolute;
      top:200px;
      width:400px;
    }

如果这与您的期望不符，请解释您到底需要什么，谢谢:)

解决方案3
 0  2015-11-01 11:55:14

    <head>
    <style type="text/css">
         ul li{
             display:inline; //new change for horizontal tab
         }

        .tabs li > label {
            display: inline-block;
            border: 1px solid #02606d;
            padding: 10px 20px;
            height: 10px;
            line-height: 10px;
            border-right-width: 0px;
            border-bottom-width: 0px;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
            cursor: pointer;
        }

        .tabs li:last-child > label {
            border-right-width: 1px;
        }

        .tabs .tab-content {
            display: none;
            position: relative; /*changes - absolute -> relative*/
            left: 0;
            padding: 5px;
            width: 100%;
            border: 1px solid #000;
        }
        .below { /* changes - new */
            display:normal;
            position:relative; /* relative*/
            padding-top:20px;  /* for some space above*/
        }


        .tabs li > input:checked + label {
            background-color: #eee;
        }

        .tabs li > input:checked ~ .tab-content {
            display: block;
        }
    </style>   
</head>
<body>
    <div>
        <div class="tab-control">
            <ul id="navlist" class="tabs">
                <li >
                    <input type="radio" name="tabs" id="tab-1" checked="checked" />
                    <label for="tab-1">First Tab</label>
                    <div class="tab-content">
                        Content of Tab 1.
                    </div>
                </li>
                <li>
                    <input type="radio" name="tabs" id="tab-2" />
                    <label for="tab-2">Second Tab</label>
                    <div class="tab-content" >
                        Line 1 - Tab 2.<br />
                        Line 2 - Tab 2.<br />
                        Line 3 - Tab 2.<br />
                        Line 4 - Tab 2.<br />
                        Line 5 - Tab 2.<br />
                        Line 6 - Tab 2.<br />
                        Line 7 - Tab 2.<br />
                        Line 8 - Tab 2.<br />
                    </div>
                </li>
                <li>
                    <input type="radio" name="tabs" id="tab-3"/>
                    <label for="tab-3">Third Tab</label>
                    <div class="tab-content">
                        Content of Tab 3.
                    </div>
                </li>
            </ul>
        </div>
        <div class="below"> /* added a class .below */
            This should come below the tab control.
        </div>
    </div>

</body>

请复制代码并粘贴为 html 文件并测试，如果它是您想要的。

在这里，我将 taqb 内容位置指定为相对位置，并在 div 中添加一个必须如下所示的类。 并且 div 的位置也是相对的。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS使用Bootstrap在响应式设计中强制内容低于固定DIV？ 高度已知的垂直居中图像，高度在div中且高度可变，允许图像在div上下浮动 使用 css 和固定 header 和页脚的可变内容 div 高度 溢出内容中的Div高度 div内内容的高度 调整div的高度到内容 查找内容不断变化的div的最小高度，以使下面的页面不会跳转 设置下一个div的高度 高度可变的可滚动div 具有简单可变高度的Div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM