Question

我在我的简单网站（http://tinyurl.com/mmzt9qa）上使用Skleleton样板文件。主页工作得很好，但由于某种原因，当我在960px div框（又名16列）中插入960px图像时，布局略微向左移动（这在徽标上尤为明显，因为该网站非常基本）。在没有大图像的页面上一切都很好。我检查是否有任何填充/边距添加，但我看不到任何东西...... 基本上是：

<div class="sixteen columns">
    <p>This works perfectly</p>
</div>

<div class="sixteen columns">
    <img src="media/image.jpg" width="960" height="732"  alt="" class="responsive-image"/>
    <p>This makes the layout move</p>
</div>

例如，检查网站上的第一个链接，然后检查第五个（麦当劳 - Playland），你会看到我的意思。我尝试降低图像尺寸，但即使在500px宽度上也能做同样的事情......

Answer 1

看起来当插入图像时，它对于浏览器来说太高了，所以它在右边显示一个滚动条，导致徽标向左移动一点。

Answer 2

从容器中分离徽标，并在不改变布局后添加任意数量的图像。

LIVE DEMO

.logo
{
    background-image: url(http://webnroll.info/matt/images/logo.png);
    width: 460px;
    height: 221px;
    margin: auto;
}


.sixteen
{
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    background: white;
}

插入图片时，布局移动几个像素

2 个答案: