实现CSS：响应堆叠卡

时间：2017-07-03 12:39:32

标签： html css responsive-design materialize

我试图在物化CSS中构建一个布局，其中许多卡片属于响应式布局：大型显示器中的四张卡片（col l3），两张中型（col m6）和一张小型卡片（col s12） ）。

不幸的是，即使它们的宽度相同，我也无法纵向堆叠而没有间隙：https://jsfiddle.net/wdvq57rp/

感谢您的帮助！

Large Layout Gaps -> Image

HTML：

<div class="container">
            <h1>Stacked-Cards Test</h1>

            <div class="row card-container">

                <!-- Test Cards -->
                <div class="col l3 m6 s12">
                    <div class="card-panel grey lighten-4">
                        <h5>Title</h5>
                        <p>Description</p>
                        <div>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                        </div>
                    </div>
                </div>

                <div class="col l3 m6 s12">
                    <div class="card-panel grey lighten-4">
                        <h5>Title</h5>
                        <p>Description</p>
                        <div>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                        </div>
                    </div>
                </div>

                <div class="col l3 m6 s12">
                    <div class="card-panel grey lighten-4">
                        <h5>Title</h5>
                        <p>Description</p>
                        <div>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                        </div>
                    </div>
                </div>

                <div class="col l3 m6 s12">
                    <div class="card-panel grey lighten-4">
                        <h5>Title</h5>
                        <p>Description</p>
                        <div>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                        </div>
                    </div>
                </div>

                <div class="col l3 m6 s12">
                    <div class="card-panel grey lighten-4">
                        <h5>Title</h5>
                        <p>Description</p>
                        <div>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                        </div>
                    </div>
                </div>

                <div class="col l3 m6 s12">
                    <div class="card-panel grey lighten-4">
                        <h5>Title</h5>
                        <p>Description</p>
                        <div>
                            <p><a href="#" class="pink-text text-accent2">Link!</a></p>
                        </div>
                    </div>
                </div>


            </div> <!-- Row Container with Cards END-->

        </div> <!-- Main Container END-->

        <!-- JS Imports -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
        <script src="./js/magic.js"></script>

CSS：

.card-panel {
    margin: 10px;
    padding: 10px;
}
.container {
  margin: 0;
  max-width: 100%;
  width: 100%;
}

2 个答案:

答案 0 :(得分：0)

基本上在12网​​格系统中，您不能使用l3 6次，这意味着3 * 6 = 18，因此您可以在容器内再使用一行来使用网格的其余部分。看到这个小提琴。

https://jsfiddle.net/wdvq57rp/2/

答案 1 :(得分：0)

最后发现了我想要实现的目标是柱宽＆amp; column-gap：https://jsfiddle.net/wdvq57rp/4/

CSS：

div.card-container {
    -moz-column-width: 23rem;
    -webkit-column-width: 23rem;
    -moz-column-gap: 1rem;
    -webkit-column-gap: 1rem;
}

.card-panel {
    display: inline-block;
    width:  100%;
}

HTML：

!DOCTYPE html>
<html>
    <head>
        <title>Stacked-Cards Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">

        <!-- CSS Imports -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
        <link rel="stylesheet" href="./css/style.css">

        <!-- Fonts Imports -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>

    <h1>Stacked-Cards Test</h1>

        <!-- Card Container -->
        <div class="row card-container">


            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

            <div class="card-panel">
                    <h5 id="title">Title</h5>
                    <p id="description">Description</p>
                <div>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                    <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
                </div>
            </div>

        </div> <!-- Card Container END -->

        <!-- JS Imports -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    </body>
</html>
相关问题
最新问题