2

我正在尝试制作一个简单的页面：两个居中的缩略图图像。每个链接到其原始图像。这是代码（为了清楚起见，我删除了一些部分）：


<!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样式表中的属性时，它解决了这个问题，但我的图片不再以包含列为中心。

拥有正确演示的正确解决方案是什么？

4

3 回答 3

2

我已经解决了你的问题，

我在 a 和 img 标签周围添加了一个包装 div，将该宽度设置为 300px，然后将图像宽度设置为 100%，如下所示，

<!DOCTYPE html>
<html>
  <head>
    <style>
      .column1, .column2 {
      width:49%;
      float:left;
      border: 1px solid red;
      }

      div img {
      width:100%;
      }

      #img-wrap{

      width:300px;
       margin:20px auto;
      display: block;
      }


    </style>
  </head>
  <body>
    <div class="column1">
      <div id="img-wrap">
      <a href="#">
        <img src="" />
      </a>
      </div>
    </div>
    <div class="column2">
      <div id="img-wrap">
      <a href="#">
        <img src="" />
      </a>
        </div>
    </div>
  </body>
</html>

可以在这里找到工作> http://jsfiddle.net/3se2V/3/

于 2013-01-11T21:33:44.660 回答
0

我相信问题出margin:20px auto;在img上：

改变这个：

div img {
    display:block;
    margin:20px auto;
    width:300px;
}

对此：

div { margin: 20px 0; }

div img {
    display:block;
    margin:0 auto;
    width:300px;
}
于 2013-01-11T20:52:33.440 回答
0

我唯一可以复制这个问题的时间是我添加display:block到所有a元素。因此，我建议将其添加到您的 css 中：

div a {
  display:inline;
}

这可能会解决您的问题。

于 2013-01-11T21:27:46.947 回答