如何對齊另一個div內的2個div？

Question

我的要求是我有左側的兩個鏈接，如果我點擊一個鏈接，相應的頁面應顯示在右側。 如何使用標籤可以做出這種安排。 我試過如下，但並不是並排顯示。 DisplayData顯示在鏈接的底部。在此先感謝..

<div id="accountstabs-1"> 
    <div id="links" style="text-align:left"> 
     <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li> 
     <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li> 
    </div> 
    <div id="DisplayData" style="text-align:right"> 
     <table class="data"> 
       <thead> 
       <tr> 
        <th> 
        First Name 
        </th> 
        <th> 
        Last Name 
        </th> 
       </tr> 
       </thead> 
     </table> 
    </div> 
</div> 

Answer 1

CSS：

#accountstabs-1>div { 
    float : left; 
} 

http://jsfiddle.net/T4E88/

Answer 2

您需要使用的，而不是text-align彩車定位元素。 （text-align只能用於文字。）

退房this JSFiddle example。

我更新了你的HTML這樣的：

<div id="accountstabs-1"> 
    <div id="links" > 
     <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li> 
     <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li> 
    </div> 
    <div id="DisplayData" > 
     <table class="data"> 
       <thead> 
       <tr> 
        <th>First Name</th> 
        <th>Last Name</th> 
       </tr> 
       </thead> 
     </table> 
    </div> 
    <div class="clr"></div> 
</div>​ 

注意，我刪除從div的兩個text-align內嵌樣式，並與clr類增加了新的div底部附近。

然後CSS是這樣的：

#links { 
    width: 50%; 
    float: left; 
} 

#DisplayData { 
    width: 50%; 
    float: right; 
} 

/* clearfix */ 
.clr { clear: both; } 

的「clearfix」的目的是爲了確保您的右列後添加的所有元素得到正確顯示的列下面。

Answer 3

您應該將樣式放在一個單獨的CSS文件中，但以下內容應該可以工作;

<div id="accountstabs-1" style="width:400px"> 
    <div id="links" style="display:block;float:left;width:200px"> 
     <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li> 
     <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li> 
    </div> 
    <div id="DisplayData" style="display:block;float:right;width:200px"> 
     <table class="data"> 
       <thead> 
       <tr> 
        <th> 
        First Name 
        </th> 
        <th> 
        Last Name 
        </th> 
       </tr> 
       </thead> 
     </table> 
    </div> 
</div> 

Answer 4

DIV是塊元素，並把整個地方horizantly， 放置在彼此平行的div你需要使用CSS屬性浮動左邊。 使用樣式屬性style="float:left"。

<div id="accountstabs-1"> <div id="links" style="text-align:left; float:left"> <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li> <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li> </div> <div id="DisplayData" style="text-align:right"> <table class="data"> <thead> <tr> <th> First Name </th> <th> Last Name </th> </tr> </thead> </table> </div> </div>