Question

换句话说，下面的HTML模糊在右上角有“小字”，我希望它在右下方。

<html>
  <body>
    <div style="width: 500px; background-color: #cdcdcd">
      <div style="font-size: x-small; float: right">little words</div>
      <div style="font-size: x-large">BIG WORDS</div>
    </div>
  </body>
</html>

Answer 1

不知道你是否可以使用正确的浮动来可靠地（大多数浏览器...）。

你可以尝试绝对定位：

<html>
  <body>
    <div style="width: 500px; background-color: #cdcdcd; position: relative;">
      <div style="font-size: x-small; postition: absolute; bottom: 0; right: 0">little words</div>
      <div style="font-size: x-large">BIG WORDS</div>
    </div>
  </body>
</html>

Answer 2

使用line-height。将它设置为“BIG WORDS”的两倍，您还可以将margin-top或padding-top设置为“little words”

结果：

alt text http://img84.imageshack.us/img84/1293/pantallazoi.png

<html>
  <body>
    <div style="width: 500px; background-color: #cdcdcd">
      <div style="font-size: x-small; float: right; line-height:400%;">little words</div>
      <div style="font-size: x-large">BIG WORDS</div>
    </div>
  </body>
</html>

Answer 3

如果需要浮点数，请更改所有div的顺序，并将clearfix类应用于包含div。

  <html>
    <body>     
      <style type="text/css">
        .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .clearfix { display: inline-block; }
        /* Opera hack */
        * html .clearfix { height:1%; }
        .clearfix { display:block; }
      </style>
      <div style="width: 500px; background-color: #cdcdcd" class="clearfix">
        <div style="font-size: x-large">BIG WORDS</div>
        <div style="font-size: x-small; float: right">little words</div>
      </div>
    </body>
  </html>

如何使浮动右元素垂直对齐到其父div的底部？

3 个答案: