Question

HTML

<div id="a">
  <div id="b">bbb</div>
  <div id="c">ccc</div>
</div>

CSS

#a {
  border: 1px solid black;
   *zoom: 1;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
  float: right;
  background-color: red;
}

我希望红色框（#c）与右下角对齐。

如果我将position:relative添加到#a而position:absolute;bottom:0;right:0添加到#c则可行，但只要我添加蓝框和容器（{{1}崩溃。我不知道哪个更高，#a或#b因此我想将定位应用于它们。通常的clear-fix不适用于绝对定位的元素。

那么如何将#c置于左下角，将#b置于右下角而不折叠容器div #c？

Answer 1

在测试了几个不同的选项之后，我发现在父容器上使用position：relative允许子标记绝对定位，但相对于父标记，而不是文档窗口。

#a {
    border: 1px solid black;
    height: 500px;width:500px;
    position:relative;
    }

#b, #c{
       position:absolute;bottom:0;
      }
#b{
    left:0;
    font-size: 36px;
    background-color: blue;
    }

#c {
    right:0;
    background-color: red;
    }

Answer 2

嗯，这是非常深奥的解决方案，但它有效：）

同时设置#b和#c inline-block，以便它们像常规内联一样相互协作，我们可以使用vertical-align。然后将text-align:justify;添加到容器，将:after添加到width:100%，将#b和#c添加到左侧和右侧。将容器的字体设置为零（并在内部块中恢复）以避免欠/过线和其他间隙，并将零字体设置为：after。

#a {
  border: 1px solid black;
  text-align:justify;
  font-size:0;
  line-height:0;
}
#a:after {
  content:"";
  display:inline-block;
  width:100%;
}

#b, #c {
  display:inline-block;
}

#b {
  vertical-align:top;
}
#c {
  vertical-align:bottom;
}

font-size:0;看起来不适用于IE，所以我们需要一点解决方案，1px负边距：

/* ie fix */
#a {
  font:1px/0 sans-serif;
}
#b, #c {
  margin:0 0 -1px;
}

小提琴：http://jsfiddle.net/gv4qd/35/

Answer 3

我应该这样做

position: absolute;
top: auto;
bottom: 0px;

目前无法测试，但稍后会测试，只需使用底部对齐的div上的css

Answer 4

经过一番乱搞后，这似乎有效。诀窍是绝对定位#a，#b和#c并将所有三个放在相对定位的div中。

HTML

<div id="alpha">
  <p>Here is a box to give the<br /> outer<br /> container<br /> some<br /> height</p>
  <div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
  </div>
</div>

CSS

#alpha {
  position: relative;

}

#a {
  border: 1px solid black;
   *zoom: 1;
  position:absolute;
  height:100%;
  width:100%;
  top:0;bottom:0;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  font-size: 36px;
  background-color: blue;
  position: absolute;
  left:0;
  bottom:0;
}

#c {
  background-color: red;
  position: absolute;
  right:0;
  bottom:0;
}

JSFiddle http://jsfiddle.net/mrmikemccabe/gv4qd/36/

我在外部div中放置了一个段落，使盒子有一些高度。如果你在外部div中没有任何东西，只需在CSS中为外部div声明一个固定的高度。

Answer 5

尝试以下方法：

#a {
  border: 1px solid black;
  *zoom: 1;
}
#a:before, #a:after {
  display: table;
  content: "";
  line-height: 0;
}
#a:after {
 clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
   float: right;
   background-color: red;
   position:absolute;
   bottom:0; right:0;
   vertical-align:bottom;
 }

Answer 6

给出一个空位：相对

给出内部div位置：绝对和底部：0px;左：0像素;或者你喜欢的任何地方。

赋予外部div位置非常重要：相对。如果不是，有时它会工作有时不会。当然，它不会像所有东西一样在非常老的Internet Explorer中工作。

绝对元素没有高度，所以如果你不能使用指定的（如高度：120px）你就是f * * *。你只能通过javascript来检查一个绝对元素和第二个元素的高度并添加特殊边距。

要确定哪个容器位于顶部，您可以使用z-index。

我忘了另一种方式。使用两个div的假复制内容，但这是很多工作，所以使用javascript更快。

Answer 7

试试这个css文件：

   #a {
        border: 1px solid black;  
        position:relative;
       *zoom: 1;
    }
    #a:before, #a:after {
       display: table;
        content: "";
        line-height: 0;
    }
    #a:after {
      clear: both;
    }

    #b {
      float: left;
      font-size: 36px;
      background-color: blue;
    }

    #c {
        float: right;
        background-color: red;
        position: absolute;
        bottom:0px;
        right:0px;
    }

如何将内容与div的底部对齐？

7 个答案:

HTML

CSS