在一個div，我想1項左對齊，另一個右對齊

Question

我有2個元素：

<div id="parent"> 
    <div id="a"></div> 
    <div id="b"></div> 
</div> 

，我想讓a左對齊和b到右對齊。通常我用來利用浮動，但我希望它適合清潔的父對象的範圍內。

我試圖讓A和B乾淨和排隊水平，而1是在1的大小格。

我正在嘗試各種嘗試顯示：內聯塊，然後做一個正確的航班等，但沒有得到所需的效果。

編輯看來，一般來說，左右浮動工作。問題是底部對齊關閉了，這讓我很煩惱。

如果我將浮動權利和浮動左側合併，它的工作原理基於元素，但如果有一種方法排列它，使A和B都停在父級的底部？

Answer 1

你有沒有考慮flex？

#parent { 
 
    display:flex; 
 
    justify-content:space-between; 
 
} 
 
div { 
 
    margin:auto 0 0;/* they line up from bottom in this margin case */ 
 
    border:solid; 
 
}

<div id="parent"> 
 
    <div id="a">a</div> 
 
    <div id="b">b<br/>line</div> 
 
</div>

或

#parent { 
 
    display:flex; 
 
    justify-content:space-between; 
 
} 
 
div { 
 
    border:solid; 
 
    /* no rules about behaviior makes each boxes of a row same height */ 
 
}

<div id="parent"> 
 
    <div id="a">a</div> 
 
    <div id="b">b<br/>line</div> 
 
</div>

現在問題並沒有說明的盒大小（寬度/高度）:)

Answer 2

試試這個：

<div id="parent"> 
    <div id="a" style="float: left;">Hello</div> 
    <div id="b" style="float: right;">World!</div> 
    <div style="clear: both;"></div> 
</div> 

需要的東西在它的中間？

<div id="parent"> 
    <div id="a" style="float: left;">Hello</div> 
    <div id="b" style="float: right;">World!</div> 
    <div style="text-align: center;">holy schmoley</div> 
    <div style="clear: both;"></div> 
</div> 

現在在一起。

<style type="text/css"> 
#a { 
    float: left; 
} 

#b { 
    float: right; 
} 

#c { 
    text-align: center; 
} 

.clear { 
    clear: both; 
} 
</style> 

<div id="parent"> 
    <div id="a">Hello</div> 
    <div id="b">World!</div> 
    <div id="c">holy schmoley</div> 
    <div class="clear"></div> 
</div> 

---

等於高度：

<style type="text/css"> 
#a, #b, #c { 
    height: 100%; 
} 

#a { 
    background-color: #ff0000; 
    float: left; 
} 

#b { 
    background-color: #00ff00; 
    float: right; 
} 

#c { 
    background-color: #0000ff; 
    text-align: center; 
} 

.clear { 
    clear: both; 
} 
</style> 

<div id="parent"> 
    <div id="a">Hello</div> 
    <div id="b">World!</div> 
    <div id="c">holy schmoley</div> 
    <div class="clear"></div> 
</div> 

---

對齊於底部使用絕對，我建議添加緣至#C div來防止任何奇數重疊：

<style type="text/css"> 
#parent { 
    position: relative; 
} 

#a, #b { 
    position: absolute; 
    bottom: 0; 
} 


#a { 
    background-color: #ff0000; 
} 

#b { 
    background-color: #00ff00; 
    right: 0; 
} 

#c { 
    background-color: #0000ff; 
    text-align: center; 
} 

.clear { 
    clear: both; 
} 
</style> 

<div id="parent"> 
    <div id="a">Hello</div> 
    <div id="b">World!</div> 
    <div id="c">holy schmoley<br /><br /><br /></div> 
    <div class="clear"></div> 
</div> 

---

浮動使用Flex

<style type="text/css"> 
#container { 
    /* width: 600px; */ 
} 

#parent { 
    position: relative; 
} 

#a { 
    display: flex; 
    float: left; 
    justify-content: space-between; 
    width: 100%; 
} 

#b { 
    background-color: #ff00ff; 
    float: left; 
    width: 100px; 
} 

#c { 
    background-color: #00ff00; 
    float: right; 
    width: 100px; 
} 

#d { 
    padding: 0 100px 0 100px; 
    width: inherit; 
} 

#e { 
    background-color: #ff0000; 
} 
</style> 


<div id="container"> 
    <div id="parent"> 
     <div id="a"> 
      <div id="b">Hello</div> 
      <div id="c"> 
       World! 
       <br /><br /><br /><br /><br /><br /> 
      </div> 
     </div> 
     <div id="d"> 
      <div id="e"> 
       <br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br /> 
      </div> 
     </div> 
    </div> 
</div> 
&copy Copyright 

浮球隨彎曲，底部定位：

<style type="text/css"> 
#container { 
    /* width: 600px; */ 
} 

#parent { 
    position: relative; 
} 

#a { 
    bottom: 0; 
    display: flex; 
    float: left; 
    justify-content: space-between; 
    position: absolute; 
    width: 100%; 
} 

#b { 
    background-color: #ff00ff; 
    float: left; 
    width: 100px; 
} 

#c { 
    background-color: #00ff00; 
    float: right; 
    width: 100px; 
} 

#d { 
    padding: 0 100px 0 100px; 
    width: inherit; 
} 

#e { 
    background-color: #ff0000; 
} 
</style> 


<div id="container"> 
    <div id="parent"> 
     <div id="a"> 
      <div id="b">Hello</div> 
      <div id="c"> 
       World! 
       <br /><br /><br /><br /><br /><br /> 
      </div> 
     </div> 
     <div id="d"> 
      <div id="e"> 
       <br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br /> 
      </div> 
     </div> 
    </div> 
</div> 
&copy Copyright 

---

使用Flex浮筒底部爲您的整個頁面佈局：

<style type="text/css"> 
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    height: 100%; 
} 

#parent { 
    position: relative; 
    height: 100%; 
} 

#a { 
    display: flex; 
    float: left; 
    justify-content: space-between; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
} 

#b { 
    background-color: #ff00ff; 
    width: 100px; 
    float: left; 
} 

#c { 
    background-color: #00ff00; 
    width: 100px; 
    float: right; 
} 

#d { 
    bottom: 0; 
    left: 100px; 
    right: 100px; 
    position: absolute; 
} 

#e { 
    background-color: #ff0000; 
} 
</style> 
<div id="container"> 
    <div id="parent"> 
     <div id="a"> 
      <div id="b">Hello</div> 
      <div id="c"> 
       World! 
       <br /><br /><br /><br /><br /><br /> 
      </div> 
     </div> 
     <div id="d"> 
      <div id="e"> 
       Heres my content!!<br /><br /><br /> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

div#a{text-align:left;} 
div#b{text-align:right;} 

或反之亦然將做的伎倆。

Answer 4

這裏的另一種選擇（根據關新標準）

HTML

<div id="parent"> 
    <div id="a"></div> 
    <div id="b"></div> 
</div> 

CSS

#a, #b { 
    width: 50%; 
    display: table-cell; 
    vertical-align: bottom; 
} 

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

FIDDLE

Answer 5

如果你想避免float那麼你可以使用display: table;來達到預期的效果。但是這需要一個額外的包裝。

CSS

#wrap { 
    display: table; 
    width: 100%; 
} 
#parent { 
    display: table-row; 
    width: 100%; 
} 
#a { 
    display: table-cell; 
    width: 50%; 
    background: green; 
} 

#b { 
    display: table-cell; 
    width: 50%; 
    background: red; 
} 

HTML

<div id="wrap"> 
    <div id="parent"> 
    <div id="a">AAAA</div> 
    <div id="b">BBBBB<p> 
    asdfafasfasdf 
    </p></div> 
    </div> 
</div> 

見我jsfiddle。

Answer 6

給予50 ％寬度分配給每個div a和b，然後創建一個float：left和b float：right。 並給予div a和b同樣的高度。 嘗試

<div id="parent"> 
    <div id="a">div a</div> 
    <div id="b">div b</div> 
    </div> 
    #a { 

    background:red; 
    float:right; 
    width:50%; 
    height:200px; 
} 

    #b { 
width:50%; 
    background:green; 
    float:left; 
    height:200px;}