HTML: верх и низ v-выровнять в одном контейнере - PullRequest
Новая
       0

HTML: верх и низ v-выровнять в одном контейнере

1 голос
/ 16 марта 2012

Учитывая этот маленький кусочек.

http://jsfiddle.net/4gb6K/7/

Я пытаюсь выровнять элемент «бот» внизу, удерживая «верх» сверху. Я решил составить этот маленький пример с div'ами, чтобы попробовать несколько вещей сам, так что я плохо использую его, но вместо действительного, та же концепция.

Фактический HTML больше похож на: 

    <a class="box" href="single.html" title="Link to Single Page">
        <h4>Cras vestibulum</h4>
        <p>Cras vestibulum lorem et dui mollis sed posuere leo semper.</p>
        <img alt="" src="images/box_ph.png">
    </a>

A - контейнер, H4 и P должны v-выровнять сверху. где я хотел бы выровнять изображение внизу.

Есть идеи? По вертикали: снизу; не делает трюк, не уверен, если это потому, что он находится в том же контейнере, что и элемент с верхним выравниванием? Но у меня не так много идей, кроме как обернуть все это в огромное количество HTML / CSS или использовать фиксированную высоту (в настоящее время это фактически «минимальная высота» вместо «высота» и абсолютное размещение.

1 Ответ

1 голос
/ 16 марта 2012

Пример: Пример jsFiddle .

Используйте позиционирование на всех трех элементах.Относительно контейнера и абсолютного значения по внутренним элементам.

CSS: 

.outer {
    height: 600px;
    border: 1px solid black;
    position: relative;
}
.top{
    position: absolute;
    border: 1px solid black;
    top: 0;
}
.bot{
    border: 1px solid black;
    position:absolute;
    bottom:0;
}

Обновление: Вот пример jsFiddle с использованием другогоПример кода с соответствующим CSS.

...