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 に答える