我最近才注意到一个非常奇怪的问题 我正在为一个 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(内容的宽度)时,上面的宽度才会存在
最佳答案
查看您的网站后,它看起来像是您的社交面板。一些生成的元素是 100px 或更宽。如果删除 width:90px;
,您可以看到它试图达到的宽度。您可以修改这些元素并将它们的宽度设置得更小(或设置为 100% 或诸如此类),或者您可以将 overflow: hidden;
应用于 #social
div:
#social {
...
overflow:hidden;
}
发生这种情况的原因是您的社交容器溢出了。它只发生在右边,因为这些元素是左对齐的。 (我想你也可以将元素右对齐。)
希望对您有所帮助。
关于html - 当浏览器小于内容时添加空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14906300/