Question

使用Materialize.min.css创建物料卡

无法将多张卡片排成一排（并排）

我面临的另一个问题是我不能制作尺寸固定的卡。调整浏览器窗口的大小会使它们在某些时候不可用。

My Code: https://pastebin.com/uu2YgdGK

尝试JSbin

Answer 1

Bro使用此代码进行修复

使用实体化CSS类并使用媒体查询来设置网站反应灵敏。
在主div上使用m12代替m2
在卡片div上使用m2类
最终检查代码和运行摘要

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
        <style>
            .card-image {
                max-height: 100% !important;
            }
            .card.small {
                height: auto !important;
            }
            @media(max-width: 1199px) {
                .card {
                    width: 20% !important;
                }
            }
            @media(max-width: 1024px) {
                .card {
                    width: 33.33% !important;
                }
            }
            @media(max-width: 625px) {
                .card {
                width: 50% !important;
                }
            }
            @media(max-width: 414px) {
                .card {
                width: 100% !important;
                }
            }
        </style>
    </head>
</html>
<body>
<div class="row">
        <div class="col s12 m12">
            <!--<div class='md-padding' layout="row" layout-wrap>-->
                <!--<div class="container">-->
                    <div class="card small col m2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="https://fbdev.mpsecure.com/groupon/201301_dir/images/upload/1363923993_tmplogo_wolf_1.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Bharatiya Janta party
                                <button class="btn waves-effect waves-light right" type="submit" name="vote1">VOTE</button>
                            </span>
                            <!--<p><a href="#">This is a link</a></p>-->
                        </div>
                    </div>
                    <div class="card small col m2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="https://fbdev.mpsecure.com/groupon/201301_dir/images/upload/1363923993_tmplogo_wolf_1.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Bharatiya Janta party
                                <button class="btn waves-effect waves-light right" type="submit" name="vote1">VOTE</button>
                            </span>
                        </div>
                    </div>
                    <div class="card small col m2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="https://fbdev.mpsecure.com/groupon/201301_dir/images/upload/1363923993_tmplogo_wolf_1.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Bharatiya Janta party
                                <button class="btn waves-effect waves-light right" type="submit" name="vote1">VOTE</button>
                            </span>
                            <!--<p><a href="#">This is a link</a></p>-->
                        </div>
                    </div>
                    <div class="card small col m2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="https://fbdev.mpsecure.com/groupon/201301_dir/images/upload/1363923993_tmplogo_wolf_1.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Bharatiya Janta party
                                <button class="btn waves-effect waves-light right" type="submit" name="vote1">VOTE</button>
                            </span>
                        </div>
                    </div>
                    <div class="card small col m2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="https://fbdev.mpsecure.com/groupon/201301_dir/images/upload/1363923993_tmplogo_wolf_1.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Bharatiya Janta party
                                <button class="btn waves-effect waves-light right" type="submit" name="vote1">VOTE</button>
                            </span>
                            <!--<p><a href="#">This is a link</a></p>-->
                        </div>
                    </div>
                    <div class="card small col m2">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="https://fbdev.mpsecure.com/groupon/201301_dir/images/upload/1363923993_tmplogo_wolf_1.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Bharatiya Janta party
                                <button class="btn waves-effect waves-light right" type="submit" name="vote1">VOTE</button>
                            </span>
                        </div>
                    </div>
                <!--</div>-->
            <!--</div>-->
        </div>
</div>
</body>

对卡使用Materialize.min.css，但无法将其调整为固定大小，也无法在一行中显示

1 个答案:

Bro使用此代码进行修复