0

我在设计这个展开 div 的内容框（verticalslider_contents）时遇到了一些麻烦，我希望这个框有边框，并且有一个动态的高度（与其中的文本一样高）。我知道我必须使用清除浮动，但我不知道为什么它不起作用。你能帮助我吗？为此，我使用 jquery 扩展功能，您可以在此处看到：http: //jsfiddle.net/DaUNb/

html

<div class="verticalslider" id="textExample">
        <ul class="verticalslider_tabs">
            <li><a href="#">Activitate 1</a></li>
            <li><a href="#">Praesent Pulvinar</a></li>
            <li><a href="#">Nunc Adipiscing</a></li>
            <li><a href="#">Praesent Dapibus</a></li>                        
        </ul>
        <ul class="verticalslider_contents">
            <li>
            <h2>Activitate 1</h2>
            <p>DADA ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum. Etiam ut nunc sed purus tempus varius. Donec id magna massa, posuere consectetur neque. Mauris tortor lacus, iaculis a pulvinar luctus, lobortis vel velit. In elementum lorem eu felis fermentum placerat et sit amet ligula. Integer euismod augue eu massa tincidunt consectetur. Suspendisse potenti. Donec in enim sollicitudin enim dignissim imperdiet ut et dolor. Phasellus nec risus vel nunc hendrerit auctor. Sed rhoncus sapien at nisl aliquam luctus. </p>
             <p>DADA ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum. Etiam ut nunc sed purus tempus varius. Donec id magna massa, posuere consectetur neque. Mauris tortor lacus, iaculis a pulvinar luctus, lobortis vel velit. In elementum lorem eu felis fermentum placerat et sit amet ligula. Integer euismod augue eu massa tincidunt consectetur. Suspendisse potenti. Donec in enim sollicitudin enim dignissim imperdiet ut et dolor. Phasellus nec risus vel nunc hendrerit auctor. Sed rhoncus sapien at nisl aliquam luctus. </p>
             <p>DADA ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum. Etiam ut nunc sed purus tempus varius. Donec id magna massa, posuere consectetur neque. Mauris tortor lacus, iaculis a pulvinar luctus, lobortis vel velit. In elementum lorem eu felis fermentum placerat et sit amet ligula. Integer euismod augue eu massa tincidunt consectetur. Suspendisse potenti. Donec in enim sollicitudin enim dignissim imperdiet ut et dolor. Phasellus nec risus vel nunc hendrerit auctor. Sed rhoncus sapien at nisl aliquam luctus. </p>

            </li>
            <li>
                <p>blabla</p>
            </li>
            <li>
            <h2>Nunc Adipiscing</h2>
            <p>CUC adipiscing purus id orci rutrum placerat. Nam posuere elementum ipsum quis faucibus. Fusce fermentum turpis ac erat mollis sit amet varius mi placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante justo, varius quis dignissim nec, condimentum in dui. Nulla sed lectus eu nunc vehicula vulputate vel nec velit. Integer eu purus nunc. Donec odio augue, sagittis pellentesque adipiscing id, dignissim vel enim. Maecenas a risus est.</p></li>
            <li>
            <h2>Praesent Dapibus</h2>
            <p>Praesent dapibus metus vitae velit blandit tempor. Donec dignissim tempus neque, a vestibulum massa aliquam sed. Vestibulum velit quam, facilisis vel pharetra nec, bibendum eget mauris. In vitae ligula ac justo varius ullamcorper. Nullam vitae urna eu metus pellentesque vehicula vel sit amet nibh. Cras nec velit dictum neque imperdiet congue in nec eros. Suspendisse ante felis, eleifend sed pellentesque id, sagittis ut magna. .</p></li>                        
        </ul>
        <div id="clear"></div>
    </div>

和CSS

@charset "utf-8";

/* Container */
.verticalslider {
/*border: 1px solid #666666;*/
overflow: hidden; 
width:1000px;
margin-top: 25px; 
height: 100%; 
}

/* Tabs */
.verticalslider_tabs {
float: left;
width: 220px;
}
.verticalslider_tabs li{ 
border-left:1px solid #666666;
}

.verticalslider_tabs, .verticalslider_tabs li{
margin: 0px; padding: 0px;
}
.verticalslider_tabs li{
list-style-type: none;
}

.verticalslider_tabs a:link, .verticalslider_tabs a:visited{
display: block; 
width: 200px; 
height: 29px; 
padding: 14px 10px 6px 10px; 
background: url(../img/tab-activitati/tabBG.jpg) bottom repeat-x;  
background-color: #eeeeee;
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 20px; 
font-weight: bold;
color: #333333;  
border-right: 1px solid #666666; 
border-bottom: 1px solid #666666; 
text-decoration: none;
}

.verticalslider_tabs a:hover, .verticalslider_tabs a:active{ 
background: url(../img/tab-activitati/tabHoverBG.jpg) bottom repeat-x; 
background-color: #fcfcfc;
}
.verticalslider_tabs li:first-child a:link, .verticalslider_tabs li:first-child a:visited{
border-top: 1px solid #666666;
 height: 30px;
 }

.verticalslider_tabs .activeTab a:link, .verticalslider_tabs .activeTab a:visited{
background: #ffffff; 
border-right: 1px solid #ffffff;
}
.verticalslider_tabs .activeTab a:hover, .verticalslider_tabs .activeTab a:active{
background: #ffffff; 
border-right: 1px solid #ffffff;
}
.verticalslider .arrow {
background: url(../img/tab-activitati/arrow.png); 
width: 27px; 
height: 60px; 
position: absolute; 
z-index: 1000; 
margin-left: 220px; 
margin-top: -55px; 
}

/* Contents */
.verticalslider_contents{
float: left;
width: 750px;
display: inline; 
margin: 0px; 
padding: 0px;
border: 1px solid #666666;
height:100%;
}
.verticalslider_contents li{
margin: 0px; 
padding: 0px;
width: 750px;
padding: 0px;
display: none;
position: absolute;
list-style-type: none; 
}
.verticalslider_contents li h2{
font-family: Georgia, "Times New Roman", Times, serif, font-size: 15px; 
color: #333333;margin: 5px 20px; 
padding: 0px;
}

.verticalslider_contents li p{ 
margin: 5px 20px; 
padding: 0px;
color: #333333;
font-family: Tahoma, Geneva, sans-serif; 
font-size: 13px; 
}

.verticalslider_contents .activeContent{
display: inline;
}

#clear {
clear:both;
}
4

1 回答 1

0

的样式.verticalslider_contents li使它position: absolute，如果您希望高度适合内容，这不是最佳选择。将其更改为position:relative似乎可以解决问题，我们添加overflow:auto以使滚动条在需要时可见：

.verticalslider_contents li {
    overflow: auto;
    position: relative;
    height: initial !important;
    min-height: 200px !important;
}

.verticalslider_contents .activeContent {
    display: block;
}

它使用该min-height属性将内容的最小高度设置为选项卡容器的高度。该height: initial !important属性覆盖了 jQuery 的样式height: 208px（我不知道为什么在这里），成为内容的高度。

我还更改了to的display属性，以便它遵循这些高度变化。请注意，原始属性不允许您指定高度。.activeContentblockinline

新的 JSFiddle：http: //jsfiddle.net/DaUNb/2/

于 2013-03-07T18:28:16.567 回答