多个图像导致整个页面的边距偏移答案

【问题标题】：More than one image causing margin shift of whole page多个图像导致整个页面的边距偏移
【发布时间】：2014-05-23 14:30:34
【问题描述】：

我已经尝试了我所知道的一切，但我仍然无法让它发挥作用。我希望这四个图像与屏幕截图中的一样，但要大得多（居中 600 像素）。但是，当我这样做时，它会导致整个容器因某种我不知道的原因向左移动。

HTML sn-p:

<body>
    <div class="container">
    <div class="header">
    ..
    </div>
    <div class="menu">
    ...
    </div>
    <div class="content">
    <div class="photos">
    <h2> Here are some photos.....</h2>
    <img src="img1">
    <img src="img2">
    ...
</div>
</div>
    </div>
</body>

CSS sn-p:

body{
    margin: 0;
    padding: 0;
}

.container{
    background-color: #AAC1CC;
    max-width: 1440px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 10px;
}

.content{
    margin-left: 20px;
    margin-bottom: 100px;
}

.photos {
    background-color: pink; /* for testing */
    width: 500px; /*for testing  - normally 100% */
    padding: 0;
    margin: 0;
}

.photos img{
    width: 100px;
    display: block;
    border: 2px solid black;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 0 30px 3px #333;
}

截图：

当图像很小（例如 100 像素）时，其他选项卡的样式相同。但是，如果我将图像的大小增加 > 150 像素，整个容器会向左移动大约 20 像素。我尝试在图像之间使用<br> 而不是display:block，但这并没有什么不同。

为什么会这样？

【问题讨论】：

标签： html css

【解决方案1】：

我唯一能想到的是，当图像较大时，它们会导致浏览器显示滚动条。由于您已将容器宽度设置为 100%，并且窗口宽度现在稍小，这可能会导致您提到的偏移。

【讨论】：

宾果游戏！我什至不会想到这一点——感激不尽。在不失去响应能力的情况下，最简单的解决方案是使最小高度高于设备高度，以便始终有一个滚动条。

【解决方案2】：

我在使用大图像时遇到了类似的问题，导致我的主容器偏离中心。 threeandme 的帖子提醒我尝试 css 中的 overflow-y 属性。我添加了溢出-y：滚动；进入“body”的css，它阻止了它为我移动。

【讨论】：

OP 想问为什么会这样？