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フィドルに貼り付けました。両方のコンテナを設定し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 に答える