Question

我有一个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;
}

Answer 1

这是我的看法。我重新构建了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>

Answer 2

试试这个： 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;
    }

如果这与您的期望不符，请说明您的具体需求，谢谢：）

Answer 3

    <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的定位也是相对的。

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

3 个答案: