0

我才刚刚开始，所以我不确定为什么这不起作用，但我正在尝试使用 jquery masonry。这似乎适用于 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; }
    });
});

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

赞赏。

编辑：对不起错字。这似乎在 IE9 中不起作用，但我已经读过它应该可以，并且提供的演示站点可以让它在 IE9 中工作。如果我查看他的源代码，就会有一个额外的 ie.js 正在进行，我想知道是否还有一些我不知道的额外内容可以让砌体在 IE9 中工作。我会想，因为它是一个 jquery 插件，它已经不应该了吗？只是试图理解这一点。

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

4

1 回答 1

0

这很糟糕（尴尬），但我只是打错了文档类型....无效。正如我所说，我是初学者。

于 2013-01-06T18:11:30.370 回答