调整浏览器大小时对齐失败

Question

我似乎找不到问题所在。我有这 3 张图片，当我打开浏览器时，它们位于正确的位置。但是如果我调整浏览器的大小，他们都会发疯。如果我刷新页面，它看起来又好了。但是，如果我打开一个更大的浏览器并将其缩小，它就会崩溃。我不明白，因为我刷新时浏览器大小是一样的..

我该如何解决这个问题？有谁知道怎么回事？

这是我的代码：

<section class="bordo">
        <div class="abt3">
            <a href="https://www.facebook.com/media/set/?set=a.1482686551971696.1073741836.1450873611819657&type=3" target="_blank"><img src="fb.png" onmouseover="this.src='fbgrey.png'" onmouseout="this.src='fb.png'" width="10%" id="face"></a>

            <a href="https://www.flickr.com/photos/105943617@N06/" target="_blank"><img src="flik.png" onmouseover="this.src='flikgrey.png'" onmouseout="this.src='flik.png'" width="10%" id="flikr"></a>

            <a href="https://500px.com/owlyac" target="_blank"><img src="500.png" onmouseover="this.src='500grey.png'" onmouseout="this.src='500.png'" width="10%" id="gram"></a>
        </div>
    </section>

还有css：

#face {
padding-left: 30%;
padding-right: 2.5%; 
}

#flikr {
padding-right: 2.5%;
padding-left: 2.5%;
}

#gram {
padding-right: 25%;
padding-left: 2.5%;
}

你可以在这里查看我的意思：http://owly.pt/where.html 尝试将其调整为可能的最小大小，以了解我的意思。

谢谢！

Answer 1

我认为您在图标和“abt3”div 的（填充和宽度）中弄乱了所有这些 %。您可以从#face、#flick、#gram 中删除所有填充，您的 div“abt3”具有 text-align:center，因此它会进行居中操作。您可以使用 margin-right:10px 在图标之间保留空格

#face, #flick{
  margin-right:10px
  }

Answer 2

包含图标的 div 需要具有 % 宽度。

其次，您应该给图像位置：绝对。如果第一点不起作用

看起来不错——设计不错

在 I-phone 上查看时看起来正确。这就是我正在使用的，因此缺少代码！

为了更清楚地了解第 1 点，请将 3 张图片包装在一个 div 中，并将其设置为您选择的 % 宽度。如果行为继续，则为您的容器和图标添加绝对位置。

我询问引导程序的原因是您可以通过媒体查询来处理这种行为。