如何將內部div與外部div的底部對齊？
[英]How do I align an inner div with the bottom of an outer div?
問題描述
我需要將內部div與外部div的底部對齊。
我的代碼看起來像這樣：
<div class="myOuterDiv">
<div class="div1 floatLeft"> Variable content here </div>
<div class="div2 floatRight"> <img class="myButton" src="" /> </div>
</div>
'div1'的內容可能會有所不同，因此外部div的高度會發生變化。 如何確保我的按鈕（div2）始終位於外部div的底部？
我更喜歡使用CSS，但如果不可能，我可以使用jQuery。
UPDATE
我選擇以jQuery方式執行此操作，在此我遇到了一些問題。 這一切都解決了，你可以在這里找到我的工作解決方案： 如何使用jQuery計算元素跨瀏覽器的高度？
4 個解決方案
解決方案1
9 已采納 2010-01-11 15:17:09
嘗試這個：
.myOuterDiv { position: relative; }
.div2 { position: absolute; bottom: 0 }
確定一些絕對的位置會將其從流程中移除 ; 您可以通過向.myOuterDiv添加底部填充來解釋這一點，該填充等於.div2的高度
解決方案2
1 2010-01-11 15:29:41
Mike的解決方案適用於所有瀏覽器。 這是我的代碼使用他的想法做你想要的：
<html>
<head runat="server">
<title></title>
<style type="text/css">
#wrapper
{
overflow: auto;
position: relative;
}
#left
{
float: left;
width: 300px;
margin-right: 10px;
}
#right
{
width: 200px;
float: left;
}
#bottom
{
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
<div id="right">
<div id="bottom"><input type="button" value="Testing" /></div>
</div>
</div>
</body>
</html>
解決方案3
0 2010-01-11 15:40:03
我會幫忙，但我在移動。 但這只是使用jquery的提示。
獲取兩個div的高度值。 相互減去高度值。 現在使用結果的值來控制右邊div的margin-top以將其向下推。
如果我在我的桌面或筆記本電腦上，我會回來看看。
解決方案4
0 2010-01-11 15:43:48
你的評論意味着你只會在div擁有圖像，而不是其他任何東西。 在這種情況下，您可以將其設置為背景圖像，與底部對齊：
<style>
.myOuterDiv {
background: transparent url("myButton.png") no-repeat right bottom;
}
</style>
<div class="myOuterDiv">
<div class="div1 floatLeft"> Variable content here </div>
</div>
取而代之的right bottom你可以使用left bottom或center bottom ，如果你想，與其。 你可能也不需要內部div 。
如何在不使用CSS中的絕對位置的情況下將內部div定位在外部div的底部
[英]How to position inner div at the bottom of outer div without using absolute position in CSS
如何向下滑動外部div，同時向下滑動內部內容（最初是隱藏的）？
[英]How do I slide down outer div while also sliding down inner contents (initially hidden)?
滾動到底部后，如何將內部div更改為fixed？
[英]How do I change an inner div to fixed after I scroll to the bottom of it?
如何使用Jquery使內部div觸發對外部div的拖動效果？
[英]How can I make an inner div trigger a drag effect on an outer div using Jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.