Question

我需要将内部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。

更新

我选择以jQuery方式执行此操作，在此我碰到了一些问题。这一切都解决了，你可以在这里找到我的工作解决方案：How can I calculate the height of an element cross-browser using jQuery?

Answer 1

试试这个：

.myOuterDiv { position: relative; }
.div2 { position: absolute; bottom: 0 }

将某个位置设为绝对会将其从流程中删除;您可以通过向.myOuterDiv添加底部填充来解释这一点，该填充等于.div2的高度

Answer 2

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>

Answer 3

我会帮忙，但我在移动设备上。但这只是使用jquery的提示。

获取两个div的高度值。相互减去高度值。现在使用结果的值来控制右边div的margin-top以将其向下推。

如果我在我的桌面或笔记本电脑上，我会再检查一下。

Answer 4

您的评论意味着您只会在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。

如何将内部div与外部div的底部对齐？

4 个答案: