html - 当浏览器小于内容时添加空格

Question

我最近才注意到一个非常奇怪的问题我正在为一个 friend 开发一个 wordpress 主题，我正在使用相对/绝对位置在一些 div 的侧面添加社交/连接按钮——这对于获得正确的设计来说效果很好。

但是，问题出现在页面右侧的“社交”div 上。如果浏览器小于主要内容的大小，它会在页面右侧添加额外的空白区域。如果我将 div 移到左侧，没问题；它只会在页面长度的一半左右添加空格(这更容易混淆)。

我一辈子都弄不明白为什么会这样；我不知道这是标准行为，还是我自己造成的问题。

我希望这里的人可能有类似的经历，或者只是知道如何解决它。

#social div 的 CSS 是:

#social{
   width: 90px; height: 250px;
   padding: 10px;
   position: absolute; right: -40px; top: 40px;
   background: #EFEFEF;
   box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}

它所在的 #page-content div 的 CSS 是:

#page-content{
   clear: both;
   min-height: 500px;
   width: 870px;
   margin: 0 auto;
   padding: 20px 0;
   position: relative;
   border: 5px solid #FFF;
   background: #F2F0D7;}

截图是:

只有当浏览器的宽度小于 960px(内容的宽度)时，上面的宽度才会存在

Answer 1

查看您的网站后，它看起来像是您的社交面板。一些生成的元素是 100px 或更宽。如果删除 width:90px;，您可以看到它试图达到的宽度。您可以修改这些元素并将它们的宽度设置得更小(或设置为 100% 或诸如此类)，或者您可以将 overflow: hidden; 应用于 #social div:

#social {
    ...
    overflow:hidden;
}

发生这种情况的原因是您的社交容器溢出了。它只发生在右边，因为这些元素是左对齐的。 (我想你也可以将元素右对齐。)

希望对您有所帮助。