0

我有一个非常奇怪的问题，我最近注意到我正在为一个朋友开发一个 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（内容的宽度）时，上面的宽度才存在

4

2 回答 2

1

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

#social {
    ...
    overflow:hidden;
}

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

希望这会有所帮助。

于 2013-02-16T03:13:28.473 回答
0

据我了解-您希望您的模板具有响应性。为此，您需要编写媒体查询来满足各种媒体尺寸和分辨率。

    /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

为不同的尺寸编写 css 样式，您可以使您的网站看起来像您想要的那样。

于 2013-02-16T03:08:27.013 回答