Как выровнять внутренний div с нижней частью внешнего div?

Мне нужно выровнять внутренний div с нижней частью внешнего div.Как выровнять внутренний div с нижней частью внешнего div?

Мой код выглядит следующим образом:

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

Содержание «див1» может варьироваться, что делает высоту внешнего DIV варьирования. Как я могу убедиться, что моя кнопка (div2) всегда остается в нижней части внешнего div?

Я предпочитаю использовать CSS, но если это невозможно, я могу использовать jQuery.

UPDATE

Я решил сделать это так, как JQuery, где я столкнулся с некоторыми проблемами. Это все решается, и вы можете найти свое рабочее решение здесь: How can I calculate the height of an element cross-browser using jQuery?

источник

2010-01-11 Steven

Итак, у вас есть левый и правый столбцы, а кнопка в правой колонке должна быть внизу, независимо от длины левого столбца, правильно? – ryanulit

Да, это так. Я, вероятно, даже не нуждаюсь в DIV вокруг кнопки (?). – Steven

Попробуйте это:

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

сделать что-то позиция абсолютного удалит его из потока; вы могли бы объяснить это, добавив нижнее дополнение к .myOuterDiv, что эквивалентно высоте .div2

источник

2010-01-11 15:17:09

Это могло бы работать, если бы externaldiv был статичным. Но у меня есть несколько внешних div на разных высотах на странице. Я попробовал что-то подобное, прежде чем я спросил здесь, и это не сработало. – Steven

Я принимаю это решение, так как оно используется наиболее часто. – Steven

Решение 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>

источник

2010-01-11 15:29:41 ryanulit

У меня была бы помощь, но я нахожусь на мобильных устройствах. Но это всего лишь намек на использование jquery.

Получить значение высоты двух div. Вычтите значения высоты друг от друга. Теперь управляйте краем верхней части правого div, используя значение результата, чтобы сместить его.

Я не проверю это, если я нахожусь на своем столе или на ноутбуке.

источник

2010-01-11 15:40:03 Joberror

Не знаю, почему вы получаете downvoted, но это то, как я сейчас тестирую, создав свой собственный jQuery-плагин. не совсем работает, но почти. – Steven

Ваш комментарий означает, что у вас будет только изображение в 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.

источник

2010-01-11 15:43:48 DisgruntledGoat

Как выровнять внутренний div с нижней частью внешнего div?

ответ

Смежные вопросы