浮動div內的jquery選項卡沒有正確顯示

我可以在沒有浮動的直接htm文件中正常工作。當我左側的&並排右側容器時，標籤會變得混亂。內容顯示在其下方的選項卡div外部。 enter image description here 浮動div內的jquery選項卡沒有正確顯示

這裏是代碼，任何人都可以解決這個問題？我發現了類似的東西，但沒有完全像我完成的事情。 jQuery的1.6.4

<link href="css/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 


    <script type="text/javascript"> 
    $(function ($) 
    { 
     $('#tabs').tabs(); 
    }); 
</script>

<br /> 

    <a href="cheer.htm" style="margin-left:10px;"> 
     <img border="0" src="images/cheerleadingjrchiefs3sm.gif" width="180" height="92" alt="" /> 
    </a> 

</div> 
<div id="rightContainer"> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">Nunc tincidunt</a></li> 
      <li><a href="#tabs-2">Proin dolor</a></li> 
      <li><a href="#tabs-3">Aenean lacinia</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
     </div> 
     <div id="tabs-2"> 
      <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
     </div> 
     <div id="tabs-3"> 
      <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
      <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
     </div> 
    </div> 
</div>

風格：

#navMenu 
{ 
    list-style-type:none; 
    font-size:1.2em; 
    font-weight:bold; 
    margin-left: 10px; 
    height: 297px; 
} 

#navMenu li 
{ 
    padding-bottom:5px; 
} 

#leftContainer 
{ 
    width:210px; 
    float:left; 
    background-image: url("../images/jrchiefsbg.gif"); 
    background-repeat:repeat; 
} 


#rightContainer 
{ 
    margin-left:220px; 
}

兩個樣式繁多在包含jquery樣式表中

.ui-helper-clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

.ui-helper-clearfix { 
    display: block; 
}

我用firebug刪除clear：both;在類的.ui輔助-clearfix：後它放在哪裏它是假設一切是減去實際背景灰色 enter image description here

現在唯一的問題是，灰色的背景下不整li元素背後

來源

2011-09-23 Anthony

標籤內容中是否有任何「清除」css屬性或什麼？ – vzwick

更新了上面的帖子，包括添加了標籤功能的stlyes到UL元素 – Anthony

已更新主要帖子與禁用清除的圖像：都在 – Anthony

基本上，在右邊的col上嘗試一個「float：right」。

如果這不起作用，可以考慮做一個小提琴，當你可以馬上調試代碼時，理解東西就容易多了。

來源

2011-09-23 20:13:46 vzwick

浮動：右將內容帶入標籤控件，但它顯示在下面我左邊的div的底部，而不是它的右邊。 – Anthony

在你的右分區上留下餘量... – vzwick

只是將它移動到左側div下面的左側 – Anthony

因此，在螢火蟲頁面上擺弄CSS後，我無法完美呈現它。我切換到 http://flowplayer.org/tools/tabs/index.html

使用非圖像CSS出來真正不錯。要使用圖像選項卡，我必須重新調整實際的選項卡圖像，以便在正確的容器中獲得所需內容。

來源

2011-09-24 12:28:48 Anthony

浮動div內的jquery選項卡沒有正確顯示

回答

相關問題