我在一行中排列了五张图片,每张图片下面都有文字,我正在尝试让它反应灵敏。问题是所有图像都没有正确缩小。我希望他们都拥有相同的宽度和宽度。高度。
到目前为止我的代码:
<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%;
}
答案 0 :(得分:4)
将以下内容添加到表css:
table-layout: fixed;
在你的情况下:
table {
width: 80%;
table-layout: fixed;
}
在这里更新了jsfiddle - http://jsfiddle.net/Y7CrV/7/
答案 1 :(得分:1)
html{
width: 100%;
}
table{
width: 80%;
}
tr{width:100%;}
td{
display: table-cell;
width: 20%;
text-align: center;
overflow: hidden;
vertical-align: baseline;
word-break: break-all;
}
img{
width: 100%;
}
答案 2 :(得分: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