Fatal编程技术网
  • javascript/
  • Javascript 强制下一个内容位于可变高度DIV之下

Javascript 强制下一个内容位于可变高度DIV之下

javascript jquery html css

Javascript 强制下一个内容位于可变高度DIV之下,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个CSS驱动的选项卡控件，工作正常，每个页面都有不同的高度 目前，下一个控件位于tab控件旁边，考虑到我正在选择的选项卡内容的可变高度，我需要它位于它下面。我也不需要固定页面高度和使用滚动条的方法 谢谢你的帮助 HTML: <div> <div class="tab-control"> <ul id="navlist" class="tabs"> <li> <

我有一个CSS驱动的选项卡控件，工作正常，每个页面都有不同的高度

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

谢谢你的帮助

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>

.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;
}
试试这个： HTML代码：

<div class="below-Tab">
        This should come below the tab control.
</div>
如果这与您的期望不符，请解释您到底需要什么，谢谢：）


ulli{
display:inline；//水平选项卡的新更改
}
.tabs li>标签{
显示：内联块；
边框：1px实心#02606d；
填充：10px 20px；
高度：10px；
线高：10px；
右边框宽度：0px；
边框底宽：0px；
边框左上半径：7px；
边框右上角半径：7px；
光标：指针；
}
.tabs li:最后一个子项>标签{
右边框宽度：1px；
}
.选项卡.选项卡内容{
显示：无；
位置：相对；/*更改-绝对->相对*/
左：0；
填充物：5px；
宽度：100%；
边框：1px实心#000；
}
.以下{/*更改-新*/
显示：正常；
位置：相对；/*相对*/
顶部填充：20px；/*用于上面的一些空间*/
}
.tabs li>输入：选中+标签{
背景色：#eee；
}
.tabs li>输入：选中~.tab内容{
显示：块；
}

    

  • 
第一选项卡
表1的内容。

    • 

  • 
第二选项卡
第1行-表2.
    
第2行-表2.
    
第3行-表2.
    
第4行-表2.
    
第5行-表2.
    
第6行-表2.
    
第7行-表2.
    
第8行-表2.
    

    • 

  • 
第三选项卡
表3的内容。

    • 


/*在下面添加了一个类*/
这应该在选项卡控件下面。
请复制代码并粘贴为html文件并进行测试，如果这是您想要的。

在这里，我给出了taqb内容的相对位置，并在div中添加了一个类，如下所示。而div的位置也是相对的。

以下是我对它的看法。我重新构造了html：
input
、
label
和
。选项卡内容
是彼此的兄弟。您还需要将相关的选项卡id添加到保存内容的div类中

输入{
显示：无；
}
.选项卡内容{
显示：无；
边框：1px纯黑；
}
输入：选中+标签{
背景：#ccc；/*我们可以针对激活的标签标签*/
}
/*仅显示相关选项卡内容*/
输入[id=tab-1]：选中~div[class~=tab-1]，
输入[id=tab-2]：选中~div[class~=tab-2]，
输入[id=tab-3]：选中~div[class~=tab-3]{
显示：块；
}

第一选项卡
第二选项卡
第三选项卡
表1的内容。
第1行-表2.

第2行-表2.

第3行-表2.

第4行-表2.

第5行-表2.

第6行-表2.

第7行-表2.

第8行-表2.

表3的内容。
这应该在选项卡控件下面。
您最好借助JSF，您能提供如何在我的案例中实现这一点吗？您想同时创建一个选项卡控件吗？元素的内容将在选项卡控件下？单击？我们可以稍微更改html结构吗？@Abdur Rahim是的，我希望它是一个水平选项卡按钮（并排），内容如下。单击选项卡按钮时，内容将展开，其余页面内容（选项卡区域下方）也将根据所选选项卡页面的高度向下或向上移动。感谢Nasco的回复。事实上，这个解决方案固定了高度，而选项卡控件是可变高度的。如果内容的高度超过200px，它将干扰下一个内容。有一个选项，您可以将选项卡设置为固定高度，然后添加溢出：滚动（它将使选项卡内容可以滚动），并让此div保持如下状态。。这是一个选项，另一个选项是使用JS.Nasco，第二种方法更合适，但我们在这种情况下实现它吗？感谢Abdur Rahim，但这似乎是一种垂直选项卡样式。我需要一个水平的标签按钮和下面的内容。我已经添加了2行代码来水平显示它们（display:inline；）。不客气，完美的悲剧。。。这看起来很接近我需要的。谢谢 
 .below-Tab{
      border:1px solid black;
      position:absolute;
      top:200px;
      width:400px;
    }

    <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>