0

複数の画像を 1 行に並べて、すべての画像の下にテキストを配置したいと考えています。テキストには複数の行を含めることができ、中央に配置されます。画像の高さは異なる場合がありますが、幅は常に同じです。画像の下部は同じ高さにし、テキストボックスの上部は同じ高さにする必要があります。

これをよりよく説明するには、次のようにします。

ここに画像の説明を入力

4

4 に答える 4

2

これを実現するためにCSSテーブル レイアウトを使用できます: (簡略化されたバージョンに更新)作業例

baselineコツは縦位置合わせにこだわることです。これにより、各画像を表示する上に (視覚的な) ベースラインが作成されます。display: table互換性は、 IE8+ と同じです。

CSS:

.row {
    display: table;
    table-layout: fixed;
    border: 1px solid grey;
}
.pic {
    display: table-cell;
    padding-left: 20px;
    vertical-align: baseline;
}
.pic:first-child {
    padding-left: 0;
}
.pic img {
    vertical-align: bottom; /* only needed for removing a few pixel gap between image and paragraph */
    border: 1px solid red;
}
.pic p {
    margin: 0;
    text-align: center;
    border: 1px solid #000;
}

HTML:

<div class="row">
    <div class="pic">
        <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="pic">
        <img src="http://dummyimage.com/100x80/000/fff" alt="ALT">
        <p>Lorem</p>
    </div>
    <div class="pic">
        <img src="http://dummyimage.com/100x20/000/fff" alt="ALT">
        <p>Lorem<br>ipsum<br>trying to break<br>everything</p>
    </div>
    <div class="pic">
        <img src="http://dummyimage.com/100x40/000/fff" alt="ALT">
        <p>Lorem<br>ipsum</p>
    </div>
</div>
于 2013-03-21T20:55:28.767 に答える
0

ラッピングdivposition: relative;を作成し、画像にこのCSSを与えます。

#wrapper .img_class {
    position: absolute;
    bottom: 0px;
    left: 20px; /* variable value */
}
于 2013-03-21T20:39:18.887 に答える
0

これは私にとってはうまくいきます... JsFiddle jsfiddleでjsを実行しませんが、それをhtmlファイルにコピーすると機能します。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>images</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet" href="css/site.css"/>
<script type="text/javascript">
var maxHeight;

function getMaxHeight(){
    var imgs=document.getElementsByClassName("bottomAlignedImage");

    if(imgs.length>0){
        maxHeight=imgs[0].height;
        for( var i=1; i<imgs.length; i++){
         var currImg = imgs[i];
            if(currImg.height>maxHeight)
              maxHeight = currImg.height;
              }
        }

}

function applyMarginToImages(){

    var imgs=document.getElementsByClassName("bottomAlignedImage");

    for( var i=0; i<imgs.length; i++){
        var currImg = imgs[i];
        currImg.style.marginTop = maxHeight-currImg.height;
        }
}

</script>
</head>

<body onLoad="getMaxHeight();applyMarginToImages();">
<table>
<tr id="imgRow">
    <td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x300/000/fff"/></td>
    <td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x100/000/fff"/></td>
    <td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x150/000/fff"/></td>
</tr>
<tr id="imgTextRow">
<td class="center"><p>Big</p></td>
<td class="center"><p>Small</p></td>
<td class="center"><p>Medium</p></td>
</tr>
</table>
</body>
</html>
于 2013-03-21T22:06:04.407 に答える
0

あなたの究極のソリューションがここにあります。それは完全に適応可能です。

http://jsfiddle.net/v99yf/1/

この例では使用<p>しましたが、使用できます<div>

于 2013-03-21T22:13:01.660 に答える