How to align div to bottom right without using absolute position?

Question

There's many posts on how to align to bottom right, but they all used absolute, and I can't do that because I don't want my 2 elements to overlap if one happens to be too big for the window size.

I tried with float, and it works to align right, but not to align bottom

<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>

You can check the result in https://jsfiddle.net/j66q82gy/7/

When the window is narrow, it doesn't matter that it's not aligned bottom, but when the window is wide and both h1 and the middle div are on the same line, it becomes apparent that it's not aligned bottom, and I need it to be aligned bottom.

I also need to keep them on the same line, so the inline should stay on both h1 and the middle div.

Edit: Flex puts thing in a sort of awkward half inline, half block like this: i.imgur dot com/YA6TdBt.png

I need something that looks like this i.imgur dot com/Awj9Bht.png (top image is my code, bottom image is photoshoped to look like what I need.)

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. 这里我只是在内部添加了一个4px的底部填充div，但是你也可以玩一下整体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>