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

概述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- 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)与右下角对齐.

如果我添加位置：相对于#a和位置：绝对;底部：0;右：0到#c它可以工作,但是一旦我添加蓝色框以及容器(#a)就会崩溃.我不知道哪个更高,#b或#c所以我想将定位应用于它们.通常的clear-fix不适用于绝对定位的元素.

那么我如何将#b放在左下角,将#c放在右下角而不折叠容器div #a？

解决方法 嗯,这是非常深奥的解决方案,但它的工作原理:)

设置#b和#c inline-block,使它们像常规内联一样相互协作,我们可以使用vertical-align.然后添加text-align：justify;容器和：后宽度：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;}

字体大小：0;看起来不适用于IE,所以我们需要1px负余量的解决方法：

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

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

总结

以上是内存溢出为你收集整理的html – 如何将内容与div的底部对齐？全部内容，希望文章能够帮你解决html – 如何将内容与div的底部对齐？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。