在一个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;}