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

问题描述

我的代码如下所示：

 < div class =myOuterDiv> 
< div class =div1 floatLeft>可变内容< / div> 
< div class =div2 floatRight> < img class =myButtonsrc =/> < / DIV> 
< / div> 
  

'div1'的内容可能会有所不同，从而使外部div的高度发生变化。
如何确保我的按钮（div2）始终停留在外部div的底部？

我更喜欢使用CSS，但如果不可行，我可以使用jQuery。

UPDATE

我选择了jQuery方式，我遇到了一些问题。这一切都解决了，你可以在这里找到我的工作解决方案：

解决方案

试试这个：

  .myOuterDiv {position：relative; } 
 .div2 {position：absolute;底部：0} 
  

使某个位置成为绝对会将其从流中移除 ;您可以通过向.myOuterDiv添加底部填充来弥补这一点，该填充等于.div2的高度。

I need to align an inner div with the bottom of an outer div.

My code looks like this:

<div class="myOuterDiv">
    <div class="div1 floatLeft"> Variable content here </div>
    <div class="div2 floatRight"> <img class="myButton" src="" /> </div>
</div>

The content of 'div1' may vary, making the height of the outer div to vary.How can I make sure that my button (div2) always stays at the bottom of the outer div?

I prefer using CSS, but if not possible, I can use jQuery.

UPDATE

I chose to do this the jQuery way, where I bumped into some issues. It's all solved and you can find my working solution here:How can I calculate the height of an element cross-browser using jQuery?

解决方案

Try this:

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

Making something position absolute will remove it from the flow; you could account for this by adding bottom padding to .myOuterDiv that is equivalent to the height of .div2

这篇关于如何将内部div与外部div的底部对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！