Question

我刚刚开始，所以我不确定为什么这不起作用，但我正在尝试使用jquery砌体。这似乎适用于FF而不是IE9？

标记

<div id="content-wrapper">
    <div>Here Goes..</div>
    <div id="list">
        <div class="tile" style="height: 14em;"></div>
        <div class="tile" style="height: 26em;"></div>
        <div class="tile" style="height: 8em;"></div>
        <div class="tile" style="height: 14em;"></div>
        <div class="tile" style="height: 8em;"></div>
        <div class="tile" style="height: 18em;"></div>
        <div class="tile" style="height: 16em;"></div>
        <div class="tile" style="height: 12em;"></div>
    </div>
</div>

的CSS：

body
        {
            background-color: #545e5d;
            padding: 3.75em 1.875em;
        }
        strong
        {
            font-weight: 700;
        }
        h1
        {
            font-size: 1.625em;
            font-style: italic;
            letter-spacing: -0.1em;
            text-align: center;
            margin-bottom: 1.875em; 
        }
            h1,
            h1 a
            {
                color: #fff;
                color: rgba( 255, 255, 255, .5 );
            }
                h1 a:hover
                {
                    color: #fff;
                }

        #wrapper
        {
            max-width: 60em;
            margin: 0 auto;
        }
            #list
            {
                width: 103.125%; 
                overflow: hidden;
                margin-left: -1.562%;
                margin-bottom: -1.875em; 
            }
                .tile
                {
                    width: 30.303%; 
                    background-color: #fff;
                    background-color: rgba( 255, 255, 255, .5 );
                    float: left;
                    margin: 0 1.515% 1.875em; 
                    background-color:#353535;
                }

        @media only screen and ( max-width: 40em ) 
        {
            .tile
            {
                width: 46.876%; 
                margin-bottom: 0.938em; 
            }
        }

        @media only screen and ( max-width: 20em ) 
        {
            #list
            {
                width: 100%;
                margin-left: 0;
            }
                .tile
                {
                    width: 100%;
                    margin-left: 0;
                    margin-right: 0;
                }
        }

js：

$( window ).load( function()
    {
    var columns    = 3,
        setColumns = function() { columns = $( window ).width() > 640 ? 3 : $( window ).width() > 320 ? 2 : 1; };

    setColumns();
    $( window ).resize( setColumns );

    $( '#list' ).masonry(
    {
        itemSelector: '.item',
        columnWidth:  function( containerWidth ) { return containerWidth / columns; }
    });
});

正如我所说，我只是在学习这一点，并想知道我错过了什么。我发现了这个概念here。

赞赏。

编辑：对不起打字错误。这似乎在IE9中不起作用，但我已经读过它，并且演示站点提供了我可以让它在IE9中工作。如果我查看他的来源，还有一个额外的ie.js正在进行，我想知道是否还有一些我不知道要在IE9中使用砖石工作的东西。我想，因为它是一个jquery插头，它已经不应该了吗？只是想了解这一点。

应该澄清，道歉：通过不工作我的意思是div被认为是居中，甚至两边都是宽度，然后是响应。当我在IE中打开时，无论屏幕大小如何，所有div都只是左侧水平。

Answer 1

这非常糟糕（令人尴尬），但我只是错误地告诉了doctype ....无效。正如我所说我是初学者。

jquery砌体不在ie9中工作：初学者

1 个答案: