Question

我在设置此扩展div的内容框（verticalslider_contents）时遇到了一些问题，我希望此框具有边框，并且具有动态高度（与其中的文本一样高）。我知道我必须使用清除漂浮物，但我不知道为什么它不起作用。你能帮助我吗？为此，我使用jquery expand函数，如您所见：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;
}

Answer 1

.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样式（为什么这里我不知道），是内容的高度。

我还将display的{{1}}属性更改为.activeContent，以便跟随这些高度变化。请注意，原始block属性不允许您指定高度。

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

为什么我的内容框在此扩展功能中无法正常工作？

1 个答案: