【问题标题】:Elements overlapping eachother on window resize窗口调整大小时元素相互重叠
【发布时间】:2012-08-02 01:40:10
【问题描述】:

在我使用Foundation 构建的this template 上,除了两个导航栏外,一切看起来都正确且响应迅速。它们都是自己的<div class="row">,但它们在窗口调整大小时相互重叠。

(如果有帮助的话,有一个@media only screen and (max-width: 767px) 应该让它看起来更干净)。

【问题讨论】:

    标签: html css responsive-design


    【解决方案1】:

    实际上,如果您使用开发人员工具在 chrome 上打开页面,或者使用 firebug 在 Firefox 中打开页面,您会看到当您将页面设置为小于 767px 宽度时,就会出现问题,因为您的 @media 仅屏幕和(最大-宽度:767 像素)。我建议检查 css 原因,如果你从 html 中删除它,你会得到更好的结果,所以你可以检查 css 中的哪些属性让你的 div 变得疯狂。

    【讨论】:

    • 谢谢!我自己添加了一个答案,只是为了记录我采取的步骤。
    【解决方案2】:

    尝试将foundation.css(第148 行附近).row 类高度增加到140px 并将主链接移动到主内容顶部的某个位置?该代码严重需要使用高度/边距或 div 块 imo :)

    编辑:粗略编辑foundation.css行不是您需要的,为该特定高度设置制作单独的css类,并通过正确的媒体查询触发使用它(宽度会导致问题发生)。这样你就可以围绕顶部导航调整任何你喜欢的类,它不是很漂亮,但它可以让事情顺利进行。

    【讨论】:

      【解决方案3】:

      正如Jorge Aguilar 所说,问题在于应用于每个<li>float: none。此外,我使用width: 100% 属性在整个屏幕上拉伸元素(就像它最初使用浮动一样,但没有重叠)

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-10-28
        • 1970-01-01
        • 1970-01-01
        • 2018-12-14
        • 1970-01-01
        • 2012-12-16
        • 1970-01-01
        相关资源
        最近更新 更多