html - 卡列不能在 Firefox 中并排工作

使用动态卡片来显示信息。但我正在与 firefox 战斗......无法并排显示卡片。

知道我的失败是什么吗？

HTML

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
        <link rel="stylesheet" type="text/css" href="styles/styles.css">
        <link rel="stylesheet" type="text/css" href="styles/cards.css">


        <!-- Angular Material requires Angular.js Libraries -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

        <!-- Angular Material Library -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

        <!-- Your application bootstrap  -->
        <script type="text/javascript">
            /**
             * You must include the dependency on 'ngMaterial'
             */
            angular.module('EspanioApp', ['ngMaterial']);


        </script>

    </head>

    <body ng-app="EspanioApp" layout="row" flex>

        <div layout="column" flex>

            <div layout="row" id="PageHeader">
                <div id="TopLogo">das Logo fehlt</div>
                <div id="TopNavigation">das Menü fehlt</div>
            </div>



            <!-- https://mikethedj4.github.io/Webkit-Scrollbar-Generator/ -->
            <div layout="row" id="PageContent" flex>

                <div layout="column" id="CardColumn" flex>

                    <div id="wrapper">

                        <div id="columns">

                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>

                        </div>

                    </div>

                </div>

            </div>

            <div layout="row" id="PageBottom">
                <div id="BottomInformation">das Impressum </div>
                <div id="BottomNavigation">das untere Menü fehlt</div>
            </div>

        </div>
    </body>

</html>

CSS

*{
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    width: 100%;
}

body{
    display: table;
    overflow: hidden;
}

body#index{
    background-image: url("../assets/start-page.jpg");
    background-position: center center;
    background-size: cover;
}

.body-row{
    display: table-row;
}

.body-cell{
    display: table-cell;
}

#TopLogo, #TopNavigation, #BottomInformation, #BottomNavigation{
    color: #F1BF00;
}

#TopLogo{
    position: absolute;
    right: 5px;
    top: 5px;
}

#TopNavigation{
    position: absolute;
    bottom: 5px;
    left: 5px;
}

#PageHeader, #PageBottom{
    position: relative;
    background: #AA151B;
    height: 175px;
}


#PageBottom{
    position: relative;
}

#BottomInformation{
    position: absolute;
    left: 5px;
    height: 175px;
    line-height: 175px;
}

#BottomNavigation{
    position: absolute;
    top: 5px;
    right: 10px;
}

#PageContent {
    background: #F1BF00;
}

#CardColumn{
    overflow-y: scroll;
}

#PageContent .body-cell{
    padding: 10px;
}

.rightAlign{
    text-align: right;
}

a{
    color: #FFFF00;
    margin: 5px;
}

#contentframe{

}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
    body#index{
        background-image: url("../assets/start-page-smart.jpg");
        background-position: center center;
        background-size: cover;
    }
}

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

@media (min-width: 1920px) {
    #columns {
        -webkit-column-count: 7;
        -moz-column-count: 7;
        column-count: 7;
    }
    #wrapper {
        width: 90%;
        max-width: 2200px;
        min-width: 1600px;
        margin: 50px auto;
    }
}

最佳答案

你需要使用更改属性

-moz-column-fill: auto

到

-moz-column-fill: balance

在此处阅读有关列填充的信息。

https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill

它说。

自动

是一个关键字，表示按顺序填充列。

余额

是一个关键字，表示内容在列之间平均分配。

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: balance;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

P.S:如果您想知道 -moz 是从哪里出现的，您需要使用它的供应商前缀，因为您正在 firefox 中检查它。

关于html - 卡列不能在 Firefox 中并排工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41364130/

html - 卡列不能在 Firefox 中并排工作

上一篇：javascript - 用线分隔文本的HTML代码

下一篇：html - 我的 HTML 和 CSS 网站布局有问题