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;
}
