相关疑难解决方法(0)

我试图浮动两个不同字体大小的div.我找不到在同一基线上对齐文本的方法.这是我一直在尝试的:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>

这是一个我正在研究的非常简单的条形图,

<div id="container">
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
</div>

如果我将容器设置为relative而内部div设置为absolute和bottom:0,那么它们都会重叠.它们在没有绝对定位的情况下很好地流动,但条形图是颠倒的.

注意:我的意图是保留条形的内联流,而不必明确指定水平位置.

这是问题的一个更好的例子.

http://jsfiddle.net/benstenson/NvvV6/1/

1) correct orientation but vertical alignment is top
<div id="no-content" class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

2) wrong orientation, vertical alignment top
<div id="has-content" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

3) mixed orientation, alignment is crazy
<div id="mixed" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c"></div>
</div>

4) correct orientation and correct alignment but<br/>
flow has been lost and …

我制作了盒子,我设置了行高,文本自动垂直居中.有没有办法或任何一种技巧来设置框底部的文字？

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
    line-height: 100px;
    vertical-align: text-bottom;
 }

<div>FoxRox</div>