如何在不使用絕對位置的情況下將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點com/YA6TdBt.png

我需要的東西，看起來像這樣i.imgur點com/Awj9Bht。 png（頂部圖片是我的代碼，底部圖片是photoshoped，看起來像我需要的東西）。

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;"> 
 
    \t Published on Friday 11th August 2017 at 12:46 \t 
 
    </div> 
 
\t \t 
 
</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;"> 
 
    \t Published on Friday 11th August 2017 at 12:46 \t 
 
    </div> 
 
\t \t 
 
</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;"> 
 
    \t Published on Friday 11th August 2017 at 12:46 \t 
 
    </div> 
 
\t \t 
 
</div>

Answer 2

這是你設想的嗎？

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

您可以使用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 4

檢查this codePen我說，這裏的CSS：

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

Answer 5

希望這將有助於

<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;"> 
 
    \t Published on Friday 11th August 2017 at 12:46 \t 
 
    </div> 
 
\t \t 
 
    <div style="clear:both"></div> 
 

 
</div>

Methord 2：

您可以通過flexbox的鏈接，因爲它非常易於使用且具有高度的重複性。