Question

我有一个DIV容器。在那个容器里，我有一个公司徽标＆amp;一个菜单，一个对齐左边一个对齐右边。如果窗口很宽，我有一组菜单图块，如果窗口收缩超过某一点，菜单应转换为堆叠/下拉菜单。

除了窗口介于960-1000px宽之间时，一切都很顺利 - 事情都变得棘手了。我的菜单不会很快从平铺变为堆叠。瓷砖最终跳到其他地方。有点难以用语言解释 - 去这里testbed.dirtydogweb.com.au＃about，调整窗口大小说980px＆amp;你会看到的。

我已经尝试了所有的CSS技巧＆amp;我知道这很容易。

第一个解决我的谜语的人。棒棒糖。

Answer 1

试试这个：

在您的JS文件 js / main.js ，第55-65行，您有以下代码：

    $(window).resize(function() {
        if( $(window).width() >= 960 ){
            if( ($("ul#menu li").css('display' ) == 'none') || ($("ul#menu li").css('display' ) == 'block') )
                $("ul#menu li").css('display','inline');
        }
        else{
            $("ul#menu li").css('display','none');
        }
    });

});

这显然可以控制菜单何时从内联更改为块元素。你的菜单元素明显大于960px，所以它不会在正确的位置转向下拉。

尝试将第56行中的数字 960 更改为 1018 。

if( $(window).width() >= 1018 ){

Answer 2

您可以更改媒体查询，以指定希望css更改的维度最小值和最大值...

示例

@media screen and (min-width: 500px) and (max-width: 800px)

DIV正在努力 - 阿尔格

2 个答案: