Question

我有两个元素：

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

我希望a左对齐，b右对齐。通常我习惯于利用浮动，但我希望它适合父对象的范围以保持清洁。

我试图让A和B变得干净并且在地平线上排队，而1是在div的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

这是另一种选择（基于新标准）

<强> 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 4

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

或反之亦然可以解决问题。

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

给每个div a和b增加50％的宽度，然后制作一个浮点数：left和b float：right。并给予div和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;}

在div中，我希望1个项目左对齐而另一个项目对齐

6 个答案: