將內容與CSS的底部對齊使用CSS

我有一段特定的HTML段，我試圖對齊到它的父項的底部。然而，父母的身高是未知的。絕對定位將無法工作，因爲高度是未知的（相信我，我已經嘗試了絕對子元素和底部廣泛記錄的相對位置：0）。有問題的內容是在一個邊欄內，如下圖所示：將內容與CSS的底部對齊使用CSS

------------------ 
| stuff  |con| 
| stuff  |ten| 
| stuff  | | 
|   | | 
|   |bot| <--- This is what I want to align to the bottom 
------------------

任何巧妙的解決方案呢？

編輯：

在這種情況下絕對位置不起作用。

------------------ 
| stuff  |con| 
| stuff  |ten| 
| stuff  | | 
|   | | 
|   |bot| 
-------------|bot| 
      |bot| 
      |bot| <--- Unintended trailing...

來源

2016-05-16 Drakken Saer

'位置：絕對;底部：0;'？ – timolawl

[將元素與flexbox對齊]（http://stackoverflow.com/q/31000885/1529630） – Oriol

@timolawl，不幸的是絕對不會在這裏工作，因爲高度沒有指定。 –

Flexbox可以做到這一點。

首先，我們將display:flex應用於整個父「行」。這等於兩列的高度。

然後，我們也將display:flex應用於邊欄，但使用的是flex-direction:column。

最後，正如Oriol在評論中提到的那樣，我們將margin-top:auto應用於我們的元素，使其處於側邊欄的底部，以便無論該側欄的內容如何，它都會一直推到底部。

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    border: 1px solid red; 
 
    margin-bottom: 1em; 
 
    display: flex; 
 
} 
 
main { 
 
    background: lightgreen; 
 
    flex: 0 0 75%; 
 
} 
 
aside { 
 
    flex: 0 0 25%; 
 
    padding: .5em; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: #c0ffee 
 
} 
 
.bottom { 
 
    height: 15px; 
 
    background: pink; 
 
    margin-top: auto; 
 
}

<div class="parent"> 
 
    <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, delectus explicabo facere veritatis culpa soluta laborum expedita, aliquam consequuntur quos eos molestias similique, impedit consectetur veniam quasi! Adipisci, voluptas qui dolore 
 
    explicabo voluptatem nobis aspernatur eligendi sapiente modi consequuntur asperiores laboriosam voluptate reprehenderit id, odit repellendus rem autem vero magni?</main> 
 
    <aside> 
 
    Lorem ipsum dolor sit amet. 
 
    <div class="bottom"></div> 
 
    </aside> 
 
</div> 
 

 
<div class="parent"> 
 
    <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, voluptatem.</main> 
 
    <aside> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quae consequatur aut magni quisquam molestiae 
 
    <div class="bottom"></div> 
 
    </aside> 
 
</div>

來源

2016-05-16 11:29:47

布拉沃，flexbox的優秀使用。謝謝！！ –

集的div容器（父DIV）：position:relative;

這將有效地產生這種需要被對準至底部可以潛在地比左柱內的內容更大的內容，然後設置按鈕CSS：

position:absolute; 
right:0; 
bottom:0;

來源

2016-05-16 03:38:52

僅當其他列較高時 – Oriol

不幸的是，由於高度沒有指定，絕對定位在我的情況下不起作用。 –

這是工作，如果你設置父位div與位置屬性是相對的 –

<html> 
<head> 
    <title>Demo</title> 
    <style> 
     .parentDiv{ 
      width:100px; 
      height:auto; 
      position:relative; 
      border:1px solid gray; 
     } 
     .buttonTest{ 
      width:50px; 
      height:30px; 
      position:absolute; 
      bottom:0; 
      right:0; 
     } 
    </style> 
</head> 
<body> 
    <div class="parentDiv"> 
     Demo 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <input type="submit" class="buttonTest" value="Button"/> 
    </div> 
</body> 
</html>

這裏，演示代碼爲您

來源

2016-05-16 03:58:13

的假定一列比其他，這是很少的情況下更高。再說一次，如果我只專注於側邊欄，這個解決方案就行得通。一旦側邊欄比左側欄長，側欄就會跳出頁面，因爲絕對定位的元素不會影響文檔的高度。 –

你可以嘗試使用按鈕位置是固定的 –

-1

給你： -

#parentDiv{ 
 
    width: 1200px; 
 
    height: auto; 
 
    display: block; 
 
    top: 0; 
 
    float: none; 
 
    margin: 0 auto; 
 
    background-color: #99d4ff; 
 
    min-height:100%; 
 
    //display: flex; 
 
} 
 

 
#bottomBox{ 
 
     position: relative; 
 
     float: bottom; 
 
     width: 300px; 
 
     height: 250px; 
 
     margin-left: 750px; 
 
     overflow: hidden; 
 
     
 
}

<div id="parentDiv"> 
 
      
 
    <div style="width:750px;overflow: hidden;margin-right: 0px;"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
 
       aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
 
       in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
       sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
 
       mollit anim id est laborum. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
 
       aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
 
       in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
       sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
 
       mollit anim id est laborum. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
 
       aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
 
       in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
       sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
 
       mollit anim id est laborum. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
 
       aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
 
       in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
       sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
 
       mollit anim id est laborum. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
 
       aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
 
       in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
       sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
 
       mollit anim id est laborum. 
 
         
 
</div>  
 
    
 
<div id="bottomBox"> 
 
<p>Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here 
 
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here 
 
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here 
 
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here</p> 
 
</div>   
 
     
 
</div>

來源

2016-05-16 05:58:54

你可以在你的父元素使用display: table，然後在您要對齊底部的性質display: table-cell和vertical-align: bottom子集。

來源

2016-05-16 06:13:20 Ricky

這個解決方案可以工作，但我需要支持移動設備，它將使用引導程序的摺疊網格系統。不幸的是，據我所知，表格單元不能做到這一點。 +1雖然有效的答案。我不好意思說我需要它做出反應。 –

將內容與CSS的底部對齊使用CSS

回答

相關問題