在jQuery選項卡中並排佈局div

我花了數小時試圖弄清楚如何在jQuery選項卡中相互佈局2個div。通常，我只是浮動：留下一些樣式的兩個div，他們開箱即用。在jQuery選項卡中佈置div有什麼祕訣嗎？在jQuery選項卡中並排佈局div

我會很感激任何幫助，因爲這是驅動我的香蕉。我已經包含了我正在試驗的代碼。多謝了。

<div id="tabContainer"> 
    <!-- the tabs --> 
     <div id="tabs"> 
      <ul> 
      <li><a href="#tabs-1">tab1</a></li> 
      <li><a href="#tabs-2">tab2</a></li> 
      <li><a href="#tabs-3">tab3</a></li> 
      <li><a href="#tabs-4">tab4</a></li> 
      </ul> 

      <div id="tabs-1"> 

       <p>Tab1</p> 

      <div id="tabRight">This is right div which I need to place next to tabs-1 div</div> 

      </div> 


      <div id="tabs-2"> 

       <p>Tab2</p> 

      </div> 

      <div id="tabs-3"> 

       <p>Tab3</p> 

      </div> 

      <div id="tabs-4"> 

       <p>Tab4</p> 

      </div> 

     </div> 
</div>

CSS（最小）

#tabContainer { float: left; padding-bottom: 1px; margin-top:200px;} 
#tabs-1 { float:left; } 
#tabRight { float:left; }

來源

2014-03-01 user1532468

但是你已經把#tabright在一個div是一個標籤...你不能做到這一點與浮動，你必須將它定位絕對。像這樣：http://jsfiddle.net/V5Zrp/。但我建議重構您的HTML，因爲它看起來不太好。 – Siyah

它是一個選項卡中的div。謝謝 – user1532468

你需要給float: left到<p>Tab1</p>

我會建議包裝<p>Tab1</p>在一個div，並給float: left它。

來源

2014-03-01 12:27:02 Tushar

非常感謝圖沙爾 – user1532468

您應該在＃tabs-1選項卡中創建兩個單獨的div。

<div id="tabs-1"> 
    <div class='tabLeft'>Tab Left</div> 
    <div class="tabRight">Tab Right</div> 
</div>

，並給他們的造型：

.tabRight { float:left; } 
.tabLeft { float:left; }

來源

2014-03-01 12:27:28 Max

Kaverzniy他們一個在另一個之上出現。謝謝 – user1532468

在jQuery選項卡中並排佈局div

回答

相關問題