Как выровнять внутренний div с основанием внешнего div? - PullRequest
2 голосов
/ 11 января 2010

Мне нужно выровнять внутренний 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, где столкнулся с некоторыми проблемами. Это все решено, и вы можете найти мое рабочее решение здесь: Как я могу рассчитать высоту элемента кросс-браузера, используя jQuery?

Ответы [ 4 ]

9 голосов
/ 11 января 2010

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

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

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

1 голос
/ 11 января 2010

Решение Майка хорошо работает во всех браузерах. Вот мой код с использованием его идеи, которая сделала то, что вы хотели:

<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>
0 голосов
/ 11 января 2010

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

0 голосов
/ 11 января 2010

Мне нужна помощь, но я на мобильном телефоне. Но это всего лишь подсказка с использованием jquery.

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...