在容器內對齊嵌套div的左右

Question

我正在嘗試創建一個與頁面一樣寬的div，並在其中包含兩個div，其中一個div左對齊，另一個右對齊。 結果比我預想的要困難得多。 使用下面的代碼，兩個div都向左對齊。 我做了一個jsFidle來演示這個問題。 謝謝閱讀。

<style>

#container{
            border:1px solid;
}

#left{
       text-align:left;
       border:1px solid red;
       display:table-cell;
}

#right{
       text-align:right;
       border:1px solid blue;
       display:table-cell;
}

</style>

<body>

  <div id = "container">
    <div id = "left">far left</div>
    <div id = "right">far right</div>
  </div>   

</body>

Answer 1

像這樣的東西通常不需要使用浮動元素或絕對定位。
在將表用於常規布局時，應該停止使用這種方法。

樣本Jsfiddle

CSS：

#container {
    display: table;
    width: 100%;
}

#container > div {
    display: table-cell;
}

.right {
    text-align: right;
}

HTML：

<div id="container">
    <div>
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right</p>
    </div>
</div>

Answer 2

您需要使用

float: left

和

float: right

在divs上。

對齊事物的一種比較酷的方法是使用

display:flex

在容器上，但恐怕您必須檢查瀏覽器的兼容性。

在容器內對齊嵌套div的左右

問題描述

2 個解決方案

解決方案1
5 已采納 2014-03-09 18:23:32

解決方案2
0 2014-03-09 18:07:24

在容器內對齊嵌套div的左右

問題描述

2 個解決方案

解決方案1 5 已采納 2014-03-09 18:23:32

解決方案2 0 2014-03-09 18:07:24

解決方案1
5 已采納 2014-03-09 18:23:32

解決方案2
0 2014-03-09 18:07:24