javascript - 连续显示弹性项目

Question

我有以下模板由 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;
}

截至目前，图像显示在另一个下方

我希望它并排显示，我应该怎么做？

标签： javascripthtmlcss

Answer 1

如果您在循环div之前添加为包装器for，如下所示：

<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>