上浮内容

Question

我有一个在实时分享中看不到的问题，但当我在一个带有触摸屏的小工具(在这个例子中是我的Iphone-8和平板电脑)浏览我的页面时，Desktop看起来没问题。

内容是浮动的。一切看起来都很好，直到我将内容拖到左边或右边，然后在两边都能看到一个巨大的空白区域。

我使用的是bootstrap预定义容器，但我删除了链接，问题仍然存在。(该链接在最后一次提交时被注释掉)。我还为平板电脑视图添加了一个更大的图像来测试，但它没有帮助。我也将容器的宽度设置为100%，然后静止不动。

为什么会发生这种情况？

https://my-portfolio-dannuzak.netlify.app/

https://github.com/dannuzak/portfolio

Answer 1

这似乎是因为“div.Social-media”。

​

​

你在上面添加了'left‘，它的宽度是'100%'，这是div的默认值，所以它会比屏幕的'left’值更宽。

一个简单的解决方案是将“.Social-media”类的“display”属性更改为“inline-block”。

Answer 2

由于在".social-media"目录中将left属性与position:relative一起使用，因此left,top,right,bottom通常与position:absoulte或postion:fixed一起使用

.social-media {
  display: inline-block;
}