我有以下由 Django 动态填充的模板
<div class="center row">
<h3><span>The Core</span></h3>
{% for member in core %}
<a class="core_img " href="#">
<div class="img__overlay">
{{member.user.first_name}} {{member.user.last_name}}
<br>
{{member.role}}
</div>
<img src='media/{{member.user.avatar}}'>
</a>
{% endfor %}
</div>
这是随附的 CSS
.core_img {
border-radius: 100%;
display: flex;
flex: 0 0 150px;
height: 150px;
justify-content: center;
overflow: hidden;
position: relative;
flex-direction: row;
width: 150px;
}
.core_img img {
height: 100%;
}
.img__overlay {
align-items: center;
flex-direction: row;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.25s;
z-index: 1;
}
.img__overlay:hover {
opacity: 1;
}
.img__overlay {
background-color: rgba(26,35,126,0.8);
color: #fafafa;
font-size: 15px;
}
我希望它一个接一个地显示,我应该怎么做?
最佳答案
如果您在 for
循环之前添加 div
作为包装器,如下所示:
<div class="center row">
<h3><span>The Core</span></h3>
<div class="test"> //////////////// This
{% for member in core %}
<a class="core_img " href="#">
<div class="img__overlay">
{{member.user.first_name}} {{member.user.last_name}}
<br>
{{member.role}}
</div>
<img src='media/{{member.user.avatar}}'>
</a>
{% endfor %}
</div>
</div>
而.test
类应该如下:
.test{
display: flex;
flex-direction: row;
}
这应该可以解决问题。
这是代码片段:
.test{
display: flex;
flex-direction: row;
}
.test a {
margin-right: 5px;
}
<div class="center row">
<h3><span>The Core</span></h3>
<div class="test">
<a class="core_img " href="#">
<div class="img__overlay">
Name
<br>
admin
</div>
<img src='https://via.placeholder.com/150'>
</a>
<a class="core_img " href="#">
<div class="img__overlay">
Name 2
<br>
admin
</div>
<img src='https://via.placeholder.com/150'>
</a>
</div>
</div>
关于javascript - 连续显示 flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56967422/