Question

我已经尝试了所有我知道的东西，但仍然无法让它发挥作用。我想要四个图像在屏幕截图中，但更大（600px居中）。但是，当我这样做时，它会导致整个容器向左移动，原因我不知道。

HTML片段：

<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片段：

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;
}

屏幕截图：

Screenshot

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

为什么会这样？

Answer 1

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

Answer 2

我遇到了类似的大图像问题导致我的主容器偏离中心。 threeandme的帖子提醒我在css中试验overflow-y属性。我添加了overflow-y：scroll;进入＆＃34;身体＆＃34;它阻止它转移我。

多个图像导致整页页边距偏移

2 个答案: