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

Question

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

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

<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 将事物置于一种尴尬的半内联半块中，如下所示：i.imgur dot com/YA6TdBt.png

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

Answer 1

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

将display: 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>

Answer 2

您可以使用flexbox 属性代替float...

完全更新的答案

fiddle

.flex {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.flex div {
  margin-left: auto;
}

<div style="border-bottom: 1px solid; padding-bottom:10px;" class="flex">
  <h1>
    This is my big title - Bla bla bla
  </h1>
  <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;">
    Published on Friday 11th August 2017 at 12:46

  </div>
</div>

Answer 3

希望这会有所帮助

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

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;
           display: table-cell;
           vertical-align:bottom;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
    <div style="clear:both"></div>

</div>

方法二：

您可以通过flexbox 的链接，因为它非常易于使用且具有高度的响应性。

Answer 4

这是你想象的吗？

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

    <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;
            align-self: flex-end;
            margin-left: auto;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

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

</div>

https://jsfiddle.net/eq6jLnct/5/

将高度更改为您需要的任何值。或者只使用最小高度。

请注意，并非所有浏览器都支持 flexbox：http://caniuse.com/#search=flex-box

Answer 5

检查我添加的this codePen，这是 CSS：

float: right;
transform: translateY(0px);