css - 如何在不使用绝对位置的情况下将div对齐到右下角？

Question

有很多关于如何对齐到右下角的帖子，但它们都使用绝对对齐，我不能这样做，因为我不希望我的 2 个元素重叠，如果一个元素恰好对于窗口大小来说太大的话。

我试过 float ，它可以右对齐，但不能底部对齐

<div style="border-bottom: 1px solid; padding-bottom:10px;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            display: inline;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

您可以在https://jsfiddle.net/j66q82gy/7/中查看结果

当窗口很窄时，底部不对齐没关系，但是当窗口很宽并且h1和中间div都在同一行时，很明显它没有底部对齐，我需要它底部对齐。

我还需要将它们保持在同一行，所以内联应该同时位于 h1 和中间的 div 上。

编辑:Flex 将内容置于一种尴尬的半内联、半 block 中，如下所示:i.imgur dot com/YA6TdBt.png

我需要类似 i.imgur dot com/Awj9Bht.png 的东西(上图是我的代码，下图经过 Photoshop 处理，看起来像我需要的。)

Answer 1

使用 Flexbox，您可以在底部对齐两者并保持内部 div 右对齐。

添加显示:flex； align-items: flex-end 到外部 div，重置 h1 上的边距(或者你可以将一个添加到另一个内部 div ) 然后将 margin-left: auto; 设置为内部 div

align-items: flex-end 将使内部 div 底部与 h1 和 margin-left 对齐: auto; 会将内部 div 推向右侧。

请注意，由于字体大小不同，它们的内部指标会在 h1 下方创建更大的空白区域。在这里，我只是在内部 div 上添加了一个 4px 的底部填充，但您也可以使用整体 line-height

---

根据评论更新

如果要保持文本展开直到达到其父宽度，请将 flex-wrap: wrap; 添加到外部 div

<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my title
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla bla bla bla bla bla bla
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>