JQuery UI選項卡標頭太大，用css漂浮雙列布局

我試圖在由float: left供電的雙列布局的右列中設置JQuery UI選項卡。JQuery UI選項卡標頭太大，用css漂浮雙列布局

的問題是：在頭的選項卡被尺寸以具有相同的高度作爲左側列中。

HTML：

<div id="zone_content"> 
    <div id="zone_main"> 
     <div id="zone_left"> 
      <p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p> 
     </div> 
     <div id="zone_tabs"> 
      <ul> 
       <li><a href="#tabs-1">Tab 1</a></li> 
       <li><a href="#tabs-2">Another Tab</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <p>blah blah blah blah</p> 
      </div> 
      <div id="tabs-2"> 
       <p>bloh bloh bloh bloh</p> 
      </div> 
     </div> 
    </div> 
</div> 
<script> 
    $(function() { 
     $("#zone_tabs").tabs(); 
    }); 
</script>

CSS：

#zone_main { 
    overflow: auto; 
    width: 100%; 
} 
#zone_left { 
    float: left; 
    width: 250px; 
} 
#zone_tabs { 
    margin-left: 250px; 
}

見jsfiddle。

我注意到，這可能是因爲this one同樣的問題，但一會兒就#zone_tabs添加float: left;的答案校正頭的高度，這也左欄結束後推標籤下來。（當左欄足夠大時：250px在jsfiddle中;如果在指定的兩處將其縮小到100px，則選項卡會找到它們的預期位置。）

所以，任何人都可以幫助我，並且請解釋爲什麼所有這些都會發生？

版本：Chrome 23及以上或Firefox 23和jQuery 1.8.2和jQuery UI 1.9.1

來源

2013-08-20 Manur

只刪除#zone_tabs左側的空白並添加左側的浮動。當然，如果您的容器#zone_main的寬度小於250像素（#zone_left寬度）+ #zone_tabs寬度，它將推動左列下的選項卡。 –

@MihaiAlex：它像你說的那樣工作，但在我的實際情況中，#zone_left的寬度是500px，並且它再次打破（在#zone_left下推送的標籤），如通過使用jsfiddle來看到的那樣。 #zone_main的寬度爲100％，未指定。 – Manur

...並且選項卡中的文本比示例中的文本長，這也會導致問題：http://jsfiddle.net/sbZ6C/ – Manur

您可以通過使用display:inline-block;和設置百分比寬度達到同樣的目的。但是，現在我已經編輯了我的答案，注意到使用float無需設置顯示：inline-block，但是我只是留下代碼，以便可以查看這兩種方式。

SEE THIS JSFIDDLE

基本上，你需要注意在這種情況下是確保了兩個div（zone_left和zone_tabs）內的任何填充或利潤率也設置比例，從而使視圖中調整的唯一的事情不同的屏幕尺寸。

#zone_main { 
    overflow: auto; 
    width: 100%; 
} 
#zone_left { 
    display:inline-block; 
    width: 30%; 
    float:left; 
} 
#zone_tabs { 
    display:inline-block; 
    width:65%; 
    float:left; 
}

來源

2013-08-20 14:17:34 Rooster

謝謝，但是在這種情況下，選項卡區域的頂部邊界上升並且取決於每個標籤內的文本數量（如jsfiddle所示）。（爲什麼不允許固定寬度？） – Manur

@manur啊好的。看到我新的小提琴。我已將其他問題解決方案與我的相結合，以演示一個有效的答案。我基本上在這個例子中使用百分比來確保兩個元素都適合容器內（即（30％+ 65％）<100％）。您可以使用固定寬度，但兩個元素都需要定義固定寬度以確保浮動在同一行中。在你擺弄問題評論時，你只有區域左側寬度被定義，所以區域標籤由於沒有明確定義，默認寬度爲100％。 – Rooster

JQuery UI選項卡標頭太大，用css漂浮雙列布局

回答

相關問題