jquery - 响应式站点上带有推子的奇怪 CSS 定位问题

标签 jquery html css wordpress responsive-design

我正在开发我主页的原型(prototype)响应式 wordpress 主题版本。我在主页上遇到了推子问题。

http://dev.epicwebdesign.ca/epicblog/

图片切换时,使用position:absolute叠加图片,然后回到position:relative。

我需要使绝对相对于菜单的左下角而不是#wrap 的左上角,这样它就不会重叠。

我试着把它放在一个容器 div 中,像这样:http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Absolutely-positioned-box-inside-a-box-with-overflow:-auto-or-hidden但这似乎不起作用。

有什么想法吗?

IE 中存在主要的 CSS 兼容性问题,请在 chrome 中尝试。它看起来应该类似于 http://epicwebdesign.ca .当浏览器窗口水平缩小时,整个主题会进行补偿。

最佳答案

您的主要内容向上 float ,因此要解决此问题,我会将导航和内容都展开到 100% 并将它们向左浮动以防止它们重叠。

为您的 id 为“navigation”的元素添加 float:left 样式。

然后,为您的 id 为“wrapper”的元素添加 float:left 和 width:100% 的样式。

我只在 Firefox 中对此进行了测试,因此您可能需要调整一些其他样式才能使其在所有浏览器中正常工作。

关于jquery - 响应式站点上带有推子的奇怪 CSS 定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11166505/

相关文章:

jquery - 悬停时淡化投资组合图像以显示放大镜或加号等?

javascript - jquery 删除与backbone.js 不工作

javascript - 提交时,将表单值存储在变量中,然后以第二个表单显示

jQuery - 获取下一个元素,无论 DOM 放置如何

JavaScript,创建新的 html 元素 : the content of the new created <td> is inserted in old <td>

javascript - 在 html5 中旋转嵌入的 pdf

jquery - 使用 jQuery 和 CSS 同时为 2 个对象设置动画

javascript - HTML 输入文件按用户选择顺序多重排序

php - .htaccess 重写传递 2 个参数的 URL

html - HTML 文件中的 &lt;style&gt; 标签未显示在浏览器中