Вертикально выровнять динамические div внутри родительского div только с HTML

Question

Вертикально выровнять динамические div внутри родительского div только с HTML

0

Вот наш html:

<div id="1" class="right">
    <div class="top"><img src=".png" alt=""></div>
    <div class="content">Some dynamic text</div>
    <div class="bottom"><img src=".png" alt=""></div>
</div>

И вот наш CSS:

.right{position:relative; top:-304px; width:170px; height:191px;}
.content{background:url(.png) repeat-y; width:170px;}

Как мы вертикально выравниваем содержимое # 1, чтобы всегда быть внизу? Конструктивные и технические ограничения означают, что мы не можем использовать какие-либо свойства таблицы CSS или JavaScript.

Richard Tinkler 31 дек. 2013, в 12:52

Источник

0

Вы говорите о прилипании .bottom к ... дну?
kleinfreund 31 дек. 2013, в 11:37

Теги:

html

css

2 ответа

1

Вы должны изменить класс .right:

.right{
     position:absolute; 
     bottom: 0; 
     width:170px; 
     height:191px;
 }

Надеюсь, это поможет вам :)

Sebastián Olate Bustamante 31 дек. 2013, в 09:08

0

хотя это так же, как мой ответ .... но все в порядке .... поздравляю с вашим первым +10 повторением ... добро пожаловать в ТАК :)
NoobEditor 31 дек. 2013, в 11:50
0

Спасибо за приветствие :)
Sebastián Olate Bustamante 31 дек. 2013, в 11:57

Ещё вопросы

Вы говорите о прилипании .bottom к ... дну?
хотя это так же, как мой ответ .... но все в порядке .... поздравляю с вашим первым +10 повторением ... добро пожаловать в ТАК :)

NoobEditor · Accepted Answer · 2013-12-31T10-17-00.000Z

demo (прокрутите до загрузочной скрипки, чтобы увидеть изображение)

.right {
    position:relative;
    top:304px;
    width:170px;
    height:191px;
}
.content {
    background:url(.png) repeat-y;
    width:170px;
}
.bottom {
    position:absolute; /* this is the key */
    bottom:0;/* this is the key */
}
.bottom >img {
    width:100%;
}

делать: использовать absolute ребенок, relative родительского div

Добавлено объяснение: поскольку ваш .right имеет top:-304px; и весь div не имеет содержания и height: 191px, поэтому вся разметка имеет height = -113px (-304 + 191), поэтому вы не сможете ничего увидеть... измените высоту, чтобы увидеть ее. посмотрим, о чем я говорю

РЕДАКТИРОВАТЬ

Предполагая, что вы фиксировали высоту div, вот решение без использования позиции

.right {
    width:170px;
    height:400px;
    border:1px solid #000;
}
.content {
    background:url(.png) repeat-y;
    width:170px;
}
.bottom {
    margin-top:300px;
    margin-bottom: -200px;    /* the bottom margin is the negative value of the footer height(200px) */
}
.bottom >img {
    width:100%;
}

Мне нужно положение: относительно позиции. Вправо относительно других элементов на странице, поэтому не могу изменить положение: абсолютное. Любые другие идеи ???
у вас есть фиксированная высота контейнера? я имею в виду. .right имеет фиксированную высоту?
@RichardTinkler: добавлена проверка редактирования .. пожалуйста!