我正在尝试制作一个简单的页面:两个居中的缩略图图像。每个链接到其原始图像。这是代码(为了清楚起见,我删除了一些部分):
<!DOCTYPE html>
<html>
<head>
<style>
.column1, .column2 {
width:50%;
float:left;
}
div img {
display:block;
margin:20px auto;
width:300px;
}
</style>
</head>
<body>
<div class="column1">
<a href="#">
<img src="maelstrom_mini.jpg" />
</a>
</div>
<div class="column2">
<a href="#">
<img src="maelstrom_mini.jpg" />
</a>
</div>
</body>
</html>
问题非常微妙:每个图像只有 300 像素宽,但锚框比它应该包含的图像更宽。它使图像在其表面上方“可点击”。我不知道如何告诉锚不要扩散到它的所有列。
当我删除display:block
样式表中的属性时,它解决了这个问题,但我的图片不再以包含列为中心。
拥有正确演示的正确解决方案是什么?