連續顯示彈性項目

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

截至目前，圖像正以一個顯示在另一個顯示之下

我希望將它一個接一個地顯示，該如何處理？

Answer 1

如果在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> 

Answer 2

我添加了一個display: flex到您的“ center row”（重命名為center-row ）類。

Flexbox非常強大，因為您可以非常輕松地排列子元素。 這是我每天使用的一個不錯的備忘單：)

 img{ background-color: red; width: 150px; } .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; } .center-row{ display: flex; flex-direction: row; justify-content: center; } 

 <h3><span>The Core</span></h3> <div class="center-row"> <a class="core_img " href="#"> <div class="img__overlay"> Test1 Test2 <br> css advisor </div> <img src=''> </a> <a class="core_img " href="#"> <div class="img__overlay"> Test1 Test2 <br> css advisor </div> <img src=''> </a> </div> 

Answer 3

只需將.core_img{display:flex}更改為inlin-flex並刪除圖像之間的空間，我將font-size:0添加到了父.row

 .row{ font-size:0; } .core_img { border-radius: 100%; display: inline-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; } 

 <div class="center row"> <h3><span>The Core</span></h3> <a class="core_img " href="#"> <div class="img__overlay"> <br> </div> <img src='https://picsum.photos/800'> </a> <a class="core_img " href="#"> <div class="img__overlay"> <br> </div> <img src='https://picsum.photos/800'> </a> </div> 

Answer 4

由於我沒有任何動態數據，因此我需要重新編寫腳本。 您將能夠對其進行重構以使其很容易地在循環中使用。

我所做的就是在.wrapper下方添加.row並display: flex; flex-direction: row; display: flex; flex-direction: row; 。

您可以將這些規則應用於.row類本身，但隨后標題將與圖像內聯，我想您不想這樣做。

HTML：

<div class="center row">
    <h3><span>The Core</span></h3>
    <div class="wrapper">
         <a class="core_img " href="#">
              <div class="img__overlay">
                    Joe Bloggs
                    <br>
                    Developer
              </div>
              <img src='http://unsplash.it/100/100'>
         </a>
        <a class="core_img " href="#">
              <div class="img__overlay">
                    Jake Bloggs
                    <br>
                    Task Master
              </div>
              <img src='http://unsplash.it/100/100'>
         </a>
    </wrapper>
</div>

CSS：

.row{
    display: block;
    margin: 1em auto;
    width: 50vw; // adjust this if you want less of a gap between images
}

h3{
    // you don't need this rule
    text-align: center;
    margin: 1em auto;
}

.wrapper{
    display: flex;
    align-items: center;
    flex-direction: row;
    align-content: space-evenly;
}

.core_img {
  border-radius: 100%;
  display: block;
  height: 150px;
  overflow: hidden;
  position: relative;
  flex-direction: row;
  width: 150px;
  margin: 1% auto; //comment this if you don't want the massive gap between images
}

.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;
}