如何解决实现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渲染的,但是任何人都可以向我指出可能导致此问题的正确方向。
编辑:如果有任何含义,则为模态。
解决方法
该代码看起来不错,这是您的带有图标的初始代码: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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。