0

我有一个视图，其中出现了多张卡片（缩略图），当我在 Google Chrome 中看到它们时它们在水平线中，当我在 Firefox 中看到它时它们在垂直线中。我希望这是 CSS 的问题，但我无法确定它。请建议..！

我在这里附上结果......！

http://i.stack.imgur.com/flvw3.png和 http://i.stack.imgur.com/SlD48.png

CSS 

     .pincolumns {
            -moz-column-count: 4;
            -moz-column-gap: 10px;
            -moz-column-fill: auto;
            -webkit-column-count: 4;
            -webkit-column-gap: 10px;
            -webkit-column-fill: auto;
            column-count: 4;
            column-gap: 10px;
            column-fill: auto;
        }

        .pin {
            -moz-column-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            column-break-inside: avoid;
            display: inline-block;
            margin: 0 2px 5px;
            padding: 5px;
            border: 1px solid #eee;
            border-radius: 5px;
            font-size: 0.8em;
        }

            .pin .title {
                font-weight: bold;
                white-space: nowrap;
                -ms-text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                width: 270px;
                overflow: hidden;
            }

            .pin .description {
                -ms-text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                width: 270px;
                height:40px;
                overflow: hidden;
            }

        .material .picBox img{
            width: auto !important;
        }


        .pin-small .pin{
            margin: 0 2px 5px;
            padding: 5px;
        }


        @media all and (max-width: 360px) {
            .pincolumns {
                -moz-column-count: 1;
                -moz-column-gap: 0px;
                -moz-column-fill: auto;
                -webkit-column-count: 1;
                -webkit-column-gap: 0px;
                -webkit-column-fill: auto;
                column-count: 1;
                column-gap: 0px;
                column-fill: auto;
            }
        }

        @media all and (min-width: 960px) {
            .pincolumns {
                -moz-column-count: 3;
                -moz-column-gap: 5px;
                -moz-column-fill: auto;
                -webkit-column-count: 3;
                -webkit-column-gap: 5px;
                -webkit-column-fill: auto;
                column-count: 3;
                column-gap: 5px;
                column-fill: auto;
            }
        }

        @media all and (min-width: 1170px) {
            .pincolumns {
                -moz-column-count: 4;
                -moz-column-gap: 10px;
                -moz-column-fill: auto;
                -webkit-column-count: 4;
                -webkit-column-gap: 10px;
                -webkit-column-fill: auto;
                column-count: 4;
                column-gap: 10px;
                column-fill: auto;
            }
        }

JS

 @functions{
            public CardViewModel ToCard(ContentPicture m, bool canEdit)
            {
                var o=new CardViewModel{
                    Name="Picture",
                    ID=m.ID,
                    Title = m.Title,
                    Description = m.Description,
                    Pic = new VZDev.ViewModels.Pic { source = m.Image, height = 0, width = 280, text = m.Title },
                    PictureViewTemplate="_Pic",
                    Notice=m.IsRejected && !string.IsNullOrWhiteSpace(m.RejectReason) ? m.RejectReason:string.Empty,
                    ShowTools=canEdit,
                    PinClass="selectable"
                };

                if(m.IsModerated){
                    if(!m.IsRejected){
                        o.Extras.Add(new ExtraButton { Icon = "icon-share-alt", Link = Url.Action("Share","Picture", new {id = m.ID }), Title = "Share" });
                    }
                    if (m.IsDownloable)
                    {
                        o.Extras.Add(new ExtraButton { Icon = "icon-download", Link = "https://vzconsole.com/assets/" + m.Image + "?down=true", Title = "Download" });
                    }
                }
                else if (canEdit) {
                    o.Extras.Add(new ExtraButton { Icon = "icon-ok", Link = Url.Action("Moderate", "Picture", new { id = m.ID }), Title = "Moderate" });
                }
                o.Extras.Add(new ExtraButton { Icon = "icon-comment", Class = "light", Link = Url.Action("Picture", "Comment", new { id = m.ID }), Title = "Comments" });
                return o;
            }
        }
        @Html.Partial("_Cards", Html.ToCards<ContentPicture>(Model.Items,isAdmin,ToCard))
    and _Cards,

HTML

<div class="row">
    <div class="span12">
        <div class="row-fluid">
            <div class="pincolumns">
                @foreach (var m in Model)
                {
                    @Html.Partial("_Card", m)
                }
            </div>
        </div>
        <table class="table grid hide">
            <thead>
                <tr>
                    <th></th>
                    <th>Title</th>
                    <th>Description</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
4

0 回答 0