Блог

Главная - Вопросы по программированию - Неожиданно материализовать перенос столбцов CSS

Неожиданно материализовать перенос столбцов 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, однако кто-нибудь сможет указать мне правильное направление относительно того, что может быть причиной этого.

Редактировать: если это что-то значит, это модально.

Ответ №1:

Этот код выглядит нормально, это ваш исходный код со значками: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>

Комментарии:

1. Привет, вы можете добавить пару новых классов и создать их flex и придать им ширину в соответствии с количеством имеющихся у вас изображений, вот так codepen.io/flyingDonut/pen/RwaVwjP

2. Спасибо, это становится немного ближе к решению. Однако количество изображений будет динамичным, и оно должно быть повторяемым (я уже выполнил некоторые медиа-запросы), поэтому я не могу гарантировать, что все строки будут «полными» все время. Есть ли правило, которое я могу применить, которое вставит их слева (в данном случае) и не испортит выравнивание?

3. Я все еще пытаюсь понять, что происходит не так с столбцами Materialize. То, что я пытаюсь сделать, должно сработать.

4. Вы правы! Я работал над этим около 4 часов, потому что я просто не понимал, почему введение простого img модуля в col приведет к неправильному поведению, в то время как значки или текст ничего не делают. В нескольких старых ответах SO упоминалось удаление строки body.width в JS. Этой строки больше нет в коде, так что это облом.

5. Я предложу обсудить это с создателями на github.com/Dogfalo/materialize/issues потому что проблема с выравниванием справа налево — это то, с чем до сих пор никто не сталкивался. Я надеюсь, что у вас получится, я бы хотел оставаться в курсе, если вы найдете решение 🙂