如何对齐浮动元素以使其底部匹配

Posted 2023-03-05

【中文标题】如何对齐浮动元素以使其底部匹配

【英文标题】：How to align floated elements such that their bottoms match

【发布时间】：2011-07-08 15:04:12

【问题描述】：

我正在编写一个网页，在其中显示标题和日期。

Blog post header http://filesmelt.com/dl/head00.png

我的 html：

<div class="post">
    <h2>Post 1</h2>
    <span class="date">February 28, 2011</span>

    <div class="post-content">
        ...
    </div>
</div>

我的 CSS：

.post h2

    float: left;


.date

    float: right;


.post-content

    clear: both;

我想要做的是垂直对齐标题和日期，使其底部匹配。现在他们没有：

Blog post header with alignment lines http://filesmelt.com/dl/head01.png

我尝试将两个文本元素包装在一个 div 中，将 div 的 position 设置为 relative，并在两个文本元素上使用绝对定位（并取出浮动声明）。这不起作用，因为由于包装器 div 折叠而没有保留上边距，即使我给了它一个 clearfix 类。

【问题讨论】：

下面的许多答案告诉您通过为填充/行高应用静态数字来纠正差异，我认为这是一个不好的解决方案。如果您使用静态数字“纠正”差异，并且将来差异发生变化，您必须更改所有静态数字。想象一下，您对 Data div 应用了填充，然后 h2 的字体大小发生了变化，您必须更改填充。

【参考方案1】：

在某些情况下，您还可以通过在 h2 中放置一个浮动和清除的跨度来完成此操作：

<h2>Actual header text
<span style="display: inline-block; float: right; clear: both;">Some floated content</span>
</h2>

这个跨度将与 h2 的底部对齐。在里面，你可以为所欲为；当页面缩小时，浮动内容将整齐地放在标题文本下方。

【参考方案2】：

许多其他答案告诉您通过为填充/行高应用静态数字来纠正差异，我认为这是一个不好的解决方案。如果您使用静态数字“纠正”差异，并且将来差异发生变化，您必须更改所有静态数字。想象一下，您对 Date div 应用填充，然后 h2 的字体大小发生变化，您必须更改填充。

试试这个：

<div class="wrapper">
 <h2>Post 1</h2>
 <span class="date">February 28, 2011</span>
</div>

还有css：

.post h2 
    display: inline-block;


.wrapper 
  position: relative;


.date 
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;

【讨论】：

非常干净的方法。绝对定位的缺点是如果水平宽度管理得不够好，它允许两个元素重叠。你最喜欢的保持空间足够大的方式是什么？

如果您可以为两个子元素（h2 和 span）添加宽度（百分比），则无需使用绝对定位并停止重叠。

【参考方案3】：

这应该可以解决它

.date

float: right;
line-height:150%;

【参考方案4】：

尝试为 h2 和 span 指定 line-height

Syntax:     line-height: <value>;
Possible Values:    

    * normal
    * <length> - for example, 10px
    * <number> - multiplied with the current font size
    * <percentage> - for example, 130% of current font size
    * inherit

例如：

h2, span.date 
  line-height: 20px;

您可能还需要设置：

span.date
   display:block;

这是一个类似的问题 Vertically align floating DIVs

【参考方案5】：

我知道很多人会不同意，而且有点冗长，但<table> 可以很好地解决这个问题：

/*CSS Somewhere*/
table width:100%;
td vertical-align:bottom;

<!--HTML-->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td align="left">
     <h2>Post 1</h2>
   </td>
   <td align="right">
     <span>Feb...</span>
   </td>
 </tr>
</table>

【讨论】：

我们都知道这一点，但是用于布局的表格是不行的。如果他需要切换日期和标题的位置怎么办？通过对 css 规则的一些更改，他将完成，使用表格，而不是他将不得不编辑每一页的代码。表格应该仅作为最后的手段，当所有其他解决方案都失败时

哇~如果我们在谈论硬编码，我 100% 同意。我习惯于使用服务器端/动态生成的 HTML~ 你引用的编辑类型要简单几个数量级。

您可以使用 display: table; display: table-row; 和 display: table-cell; 并且在语义上仍然准确。

【参考方案6】：

对类 Date 使用 padding-top

.date

    float: right;
    padding-top:15px;//Distance between the red lines in second image

【讨论】：

不是一个好计划，如果h2 的字体大小稍后改变怎么办？您必须更改填充以匹配新的差异。

那么div的高度和宽度应该是恒定的。