Question

我有三个div，我试图把它放在一条线上。我希望一个人总是向左拍，我希望一个人总是向右拍。第三个，显示将使用javascript切换，必须始终是中心。我试过漂浮。我试过显示：inline-block。什么都行不通。以下是我的代码，非常感谢任何帮助。

<div id="header" class="AppBackColor" style="color:#FFFFFF; padding:2px; width:100%; height:34px;">
<div style="height:100%;display:inline-block;float:left;">
    <img src="Images/Logo/uss_logo_white.gif" height="30px" width="31px" alt="USS" />
    <label>Change Control</label>
</div>                    
<div id="TimeoutWarning" style="height:100%; width:450px;display:inline-block;margin:0 auto;">Your session will expire in <label id="lblSessionCountDown">5:00</label>. Click <a style="color: Red;" href="#" onclick="ResetSession();void(0);">OK</a> to continue your session.</div>
<div style="height:100%;display:inline-block;float:right;">
    <label>User:</label>
    <asp:Label ID="lblUser" runat="server"></asp:Label>
    <asp:ImageButton ID="btnLogout" runat="server" BorderStyle="None" ImageUrl="~/Images/Logout-icon.png" onclick="btnLogout_Click" Height="30px" Width="30px"/>
</div>

Answer 1

以下是一种方法的示例。 HTML中div的顺序为left, right, center非常重要，否则right will place itself位于left和center元素下方。 See it live at jsfiddle（用JS隐藏/显示中心）。这是HTML：

<div class="left">left text</div>
<div class="right">right</div>
<div class="center">center</div>

和CSS：

.left, .center, .right {
    background-color: red;
    width: 100px;
}
.left {
    float: left;
}
.center {
    margin: auto;
}
.right {
    float: right;
}

Answer 2

你可以使用这样的绝对定位：

.container {
  position: relative;
  width: 100%;
  height: 50px;
}

.first {
  width: 100px;
  height: inherit;
  position: absolute;
  left: 0;
  background-color: #FAA;
}

.second {
  width: auto;
  height: inherit;
  position: absolute;
  top: 0;
  margin-left: 100px; // 1st div width
  margin-right: 200px; // 3rd div width
  background-color: #AFA;
}

.third {
  width: 200px;
  height: inherit;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #AAF;
}

然后使用<div class="container">，其中包含3个div，其中包含first，second和third类。

如果将第二个边距设置为第一个和第三个的边距，就像在样本中一样，它将填满所有空间。

你可以看一下这个小提琴：http://jsfiddle.net/jbustos/Bq2rw/

将三个div放在一行上

2 个答案: