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是一个块元素，它将整个位置水平放置，要并行放置另一个div，你需要使用css属性float left。使用样式属性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>

如何在另一个div内对齐2个div？

4 个答案: