3

5 つの画像を 1 行に並べて、それぞれの下にテキストを配置し、レスポンシブにしようとしています。問題は、すべての画像が適切に縮小されないことです。私はそれらをすべて同じ幅と高さにしたい。

これまでの私のコード:

<table>
    <tr>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>testing text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>Longerishhh texting text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>Text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>Quite long text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>More testing</p>
        </td>
    </tr>
</table>

CSS:

html{
    width: 100%;
}

table{
    width: 80%;
}

td{
    display: table-cell;
    width: 20%;
    text-align: center;
    overflow: hidden;
    vertical-align: baseline;
}

img{
    width: 100%;    
}

jsfiddle

4

3 に答える 3

0

フローティング div を使用しないのはなぜですか?

div.row {
    width: 80%;
}

/* clearfix */
div.row { zoom:1; }
div.row:before, div.row:after { content:""; display:table; }
div.row:after { clear:both; }

div.row .column {
    width: 20%;
    float: left;
    text-align: center;
    overflow: hidden;
}

参照: http://jsfiddle.net/Y7CrV/8/

しかし、より柔軟性が必要な場合は、http://foundation.zurb.com/grid.php をご覧ください。

于 2013-07-24T12:46:16.253 に答える