Question

我的图像上面叠加了单词。现在我希望包含这些单词的框与图像的底部对齐，并在将更多单词添加到该框时增加。所以盒子从底部增加高度：

.mini-pic-small-style {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    float: left;
    height: 272px;
    margin-top: 2px;
    padding: 10px;
    text-align: center;
    width: 100%;
    }
    .mini-pic-small-style.draw-shadow img {
        max-height: 250px;
        max-width: 100%;
    }
    .games_img_interests {
        background: rgba(250, 250, 250, 0.7) none repeat scroll 0 0;
        color: #444446;
        left: -10px;
        position: relative;
        top: -70px;
        width: 106%;
    }

<div class="mini-pic-small-style draw-shadow">
    <a title="Benutzerprofil" target="_parent" href="index.php">
    <img src="http://dualda.com/media/com_findme/userimages/3185/thumbs/1428834630.jpg" class="first-row-image-img"></a>                            
    <!-- Show interests -->
    <div class="games_img_interests"> Computer, England, Fahrradfahren,Fotografie, Freunde treffen, Kaffee, Kamera, Kino, Laufen, London,Musik     hören, Reisen, Schwimmen, Wandern.
    </div>
    </div>

Answer 1

＆＃13;

.mini-pic-small-style {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    float: left;
    height: 272px;
    margin-top: 2px;
    padding: 10px;
    text-align: center;
    width: 100%;
    position: relative; /* <------------ needed for child positioning */
    box-sizing: border-box; /* <------------ keeps padding inside 100% width */
}
.mini-pic-small-style.draw-shadow img {
    max-height: 250px;
    max-width: 100%;
}
.games_img_interests {
    background: rgba(250, 250, 250, 0.7) none repeat scroll 0 0;
    color: #444446;
    position: absolute; /* <------------ allows bottom alignment */
    left: 0;
    right: 0;
    bottom: 0;
}

＆＃13;

<div class="mini-pic-small-style draw-shadow">
    <a title="Benutzerprofil" target="_parent" href="index.php">
    <img src="http://dualda.com/media/com_findme/userimages/3185/thumbs/1428834630.jpg" class="first-row-image-img"></a>                            
    <!-- Show interests -->
    <div class="games_img_interests"> Computer, England, Fahrradfahren,Fotografie, Freunde treffen, Kaffee, Kamera, Kino, Laufen, London,Musik     hören, Reisen, Schwimmen, Wandern.
    </div>
    </div>

＆＃13;

如何将元素与父元素的底部对齐并使文本内容适合

1 个答案: