使用CSS將內容對齊到div的底部
[英]Align content to bottom of div with CSS
問題描述
我有一個特定的HTML片段，我試圖將其對齊到其父元素的底部。 但是，父母的身高未知。 由於高度未知，絕對定位將不起作用（相信我，我已經嘗試了廣泛記錄的相對位置，其中絕對子元素和bottom：0）。 有問題的內容在側欄中，如下所示：
------------------
| 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...
5 個解決方案
解決方案1
3 2016-05-16 03:38:52
設置div容器（父div） ： position:relative;
然后設置按鈕CSS：
position:absolute;
right:0;
bottom:0;
解決方案2
1 2016-05-16 06:13:20
您可以在父元素中使用display: table ，然后在您要使其底部對齊的子元素上設置屬性display: table-cell和vertical-align: bottom 。
解決方案3
1 已采納 2016-05-16 11:29:47
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>
解決方案4
0 2016-05-16 03:58:13
<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>
在這里，為您演示代碼
解決方案5
-1 2016-05-16 05:58:54
這個給你 ：-
#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>
"如何使用css將div的內容與底部對齊？"
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.