我不知道這個規格有什麼要說的,但Chrome的行爲看起來不對。我的其他瀏覽器(Opera,Firefox和Internet Explorer)都不會以這種方式呈現表格。
我覺得這是比較容易擺脫表:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
div.gallery{
width: 750px;
font-size: 0;
overflow: hidden;
}
div.gallery div.large{
float: left;
width: 400px;
}
div.gallery div.thumbs{
float: left;
width: 350px;
}
div.gallery div.thumbs div{
display: inline-block;
}
--></style>
</head>
<body>
<div class="gallery">
<div class="large"><img src="http://placehold.it/400x600"></div>
<div class="thumbs">
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
</div>
</div>
</body>
</html>
實現精確的像素佈局與表可以是一個噩夢。
看來divs在這個特定問題上比表格更好,反正謝謝。 – Madr
@Madr - 這實際上是一個普遍問題。在表格中設置特定的單元格高度總是幾乎不可能。 –