Вертикально совместите пункт к нижней части DIV не будет работать

У меня есть следующая проблема:Вертикально совместите пункт к нижней части DIV не будет работать

У меня есть DIV и в этом DIV У меня есть пункт (р тег), который содержит как 5 изображений. Я хочу, чтобы весь абзац располагался в нижней части контейнера div, но мне не удалось его выполнить, я попробовал его, чтобы сделать строку отображения в виде строки или таблицы, и вертикально выровнять ее по низу, но ничего работает.

Может быть, кто-нибудь может мне помочь?

Код:

Div Контейнер:

#info { 
    float:left; 
    text-align:center; 
    width:770px; 
    height:600px; 
    background:#fcfcfc; 
    border:thin solid; 
    border-color:#CCC; 
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px; 
    font-family: "Myriad Pro"; 
    font-size: 12px; 
}

Пункт, который должен быть в нижней части DIV

<p style="display:inline-block; vertical-align:bottom;"> 
     <!-- Twitch Chat - Insert Twitch Id --> 
     <a href="http://de.twitch.tv/chat/embed?channel=guardsmanbob&amp;popout_chat=true"><img id="ov" src="../Images/List/diverse/button_twitchchat.png" /></a> 
     <!-- IRC Chat - Insert Quakenet id --> 
     <a href="http://webchat.quakenet.org/?channels=guardsmanbob"><img id="ov" src="../Images/List/diverse/button_ircchat.png" /></a> 
     <!-- Facebook - Insert Facebook URL --> 
     <a href="https://www.facebook.com/pages/Guardsman-Bob/316802258368275"><img id="ov" src="../Images/List/diverse/button_facebook.png" /></a> 
     <!-- Twitter - Insert Twitter URL --> 
     <a href="https://twitter.com/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_twitter.png" /></a> 
     <!-- Leaguepedia - Insert Leaguepedia URL --> 
     <a href="http://leaguepedia.com/wiki/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_leaguepedia.png" /></a> 
     </p>

источник

2013-02-04 Jakob Abfalter

Знаете ли вы высоту изображений и они всегда будут одинаковыми? – Pete

Да, я знаю высоту и да, они всегда одни и те же, почему? –

вы можете реализовать вертикальное выравнивание через «display: table-cell» для ваших «а-тегов». P должен иметь «display: table»; –

Как вы знаете высоту своего р теге и он всегда будет то вы можете использовать что-то вроде этого:

для родительского контейнера параграф ч добавить следующие стили:

.parent {position:relative; padding-bottom:20px; /*height of your images plus any padding for your paragraph*/}

, то вы можете разместить свои изображения абсолютно:

p {position:absolute; bottom:0; left:0;}

источник

2013-02-04 14:57:36 Pete

это работает: D Yay thx за помощью примет вас! –

эй еще вопрос: Я решил также поместить объект, который находится поверх изображений, в нижнюю часть, поэтому я просто установил padding на 450 и поместил объект в тэг p. Положите, чем это не будет работать снова, и div просто увеличит размер заполняемого мною набора. Любая идея почему? –

что это за объект и его высота? – Pete

Может быть, это будет работать для вас:

<div id="info" style="position:relative;"> 
    <div style="position:absolute; bottom: 50px;"> 
     <p>[your images]</p> 
    </div> 
</div>

"50px" выше должна равняться высота изображений в теге <p>.

Или, если высота изображения варьируется, вы можете воспользоваться техникой, найденной здесь: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html. Вам нужно будет изменить поля таким образом, чтобы вы могли выполнить требуемое позиционирование, но связанная с ним техника даст вам нужную вам потребность.

источник

2013-02-04 15:02:28 ktamlyn

Вертикально совместите пункт к нижней части DIV не будет работать

ответ

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