html - 如何将内容对齐到 div 的底部？

Question

jsFiddle

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 它可以工作，但是一旦我添加它，蓝色框以及容器 (#a) 就会崩溃。我不知道哪个会更高，#b 或 #c 所以我想对它们都应用定位。通常的 clear-fix 不适用于绝对定位的元素。

那么如何在不折叠容器 div #a #b 定位到左下角，将 #c 定位到右下角?

Answer 1

好吧，这是一个非常深奥的解决方案，但它确实有效:)

同时设置 #b 和 #c inline-block 以便它们像常规内联一样相互协作，我们可以使用 vertical-align。然后添加 text-align:justify; 到容器和 :after with width:100% 将#b 和#c 拉到左边，右侧。将容器的字体设置为零(并在内部 block 中将其恢复)以避免下划线/上划线和其他间隙，并将零字体设置为 :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;
}

fiddle :http://jsfiddle.net/gv4qd/35/