时间戳

首页 > 解决方案 > 实现 CSS 列意外换行

materialize - 实现 CSS 列意外换行

问题描述

我遇到了 Materialize CSS 列的问题。本质上，我希望以下内容呈现如下。

1 2 3 4 5 6
7 8

但是，结果看起来像这样。

1 2 3 4 5 6
        7 8

<div class="row">
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
  <div class="col s4 m3 l2">
    <img src="my-image.png" class="responsive-img circle hoverable">
  </div>
</div>

从那以后，我发现如果我将 html（如上所述）隔离到一个新文件中，问题就不会发生。

由于 HTML 是用 Django 渲染的，所以给出一个完整图片的例子会有点棘手，但是任何人都能够指出正确的方向，可能是什么导致了这种情况。

编辑：如果它意味着什么，它是一个模态的。

标签： materialize

解决方案

该代码看起来不错，这是您带有图标的初始代码：https ://codepen.io/flyingDonut/pen/qBZrMgm

根据 OP 的要求进行更新：添加一对自定义的 flex 类（容器和项目）并给它们一个包装解决了 img 问题：https ://codepen.io/flyingDonut/pen/RwaVwjP

代码：

<!DOCTYPE html>

<head>
    <title>Edit Profile</title>

    <!-- Materialize -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        .cc {
            display: flex;
            flex-direction: row;
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
        }

        .cr {
            padding: 4px;
        }
        @media screen and (max-width: 1980px) {
            .cr {
                flex-basis: 10%;
            }
        }
            @media screen and (max-width: 1600px) {
            .cr {
                flex-basis: 14.2%;
            }
        }

        @media screen and (max-width: 1300px) {
            .cr {
                flex-basis: 20%;
            }
        }
        @media screen and (max-width: 800px) {
            .cr {
                flex-basis: 33.3%;
            }
        }
        @media screen and (max-width: 500px) {
            .cr {
                flex-basis: 50%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#test" class="waves-effect waves-light btn modal-trigger">Change Image</a>
        <div id="test" class="modal">
            <div class="modal-content">
                <h4 class="center">Change Profile Avatar</h4>
                <div class="cc">
                    <div class="cr">
                        <img
                            id="profilePic1"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic2"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic3"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic4"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic5"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic6"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic7"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic8"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic9"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic10"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic11"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic12"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic13"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>

                    <div class="cr">
                        <img
                            id="profilePic14"
                            src="https://i.imgur.com/MM0HXX0.png"
                            class="small circle hoverable responsive-img"
                            style="cursor: pointer"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".modal").modal();
        });
    </script>
</body>

推荐阅读