Question

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


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

正确呈现两种方法的正确方法是什么？

Answer 1

我已经解决了你的问题，

我在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>

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

Answer 2

我认为问题是img上的margin:20px auto;：

改变这个：

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

到此：

div { margin: 20px 0; }

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

Answer 3

我可以复制此问题的唯一时间是我向所有display:block元素添加a。所以，我建议你把它添加到你的CSS中：

div a {
  display:inline;
}

这可能会解决您的问题。

为什么img标签扩展超出其宽度？

3 个答案: