2

次の問題があります。

私は div を持っており、この div には 5 つの画像を含む段落 ( p タグ ) があります。段落全体を 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>
4

2 に答える 2

5

pタグの高さを知っていて、それは常に同じであるため、次のようなものを使用できます。

段落の親コンテナには、次のスタイルを追加します。

.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-04T14:57:36.313 に答える
0

多分これはあなたのために働くでしょう：

<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-04T15:02:28.873 に答える