0

样本：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left {display:table-cell; width:448px; height:336px; vertical-align:middle; background:black;}
#left img {display:block; margin:0 auto;}
#right {width:97px; height:326px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black;}
</style>
</head>
<body>
<div id="left"><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></div>
<div id="right">
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>

如果我使用div {float:left;}，大图像将不再垂直居中。解决方案是什么？

4

2 回答 2

0

我不完全确定你想要什么，但是我做了一个猜测并将其卡在 JS Fiddle here中。我只是将两个容器都设置为float:left并删除display:table-cell

希望能帮助到你

于 2012-07-14T15:07:39.607 回答
0

看看这是否正常：http: //jsfiddle.net/vmuwZ/2/

CSS 更改：

#left {display:table-cell; width:448px; height:340px; vertical-align:middle; background:black; float: left;}
#left img {display:block; margin:20px auto;}
#right {width:100px; height:330px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black; float: left;}​
于 2012-07-14T15:48:08.157 回答