0

Как сделать, чтобы блоки выводились на всю ширину экрана, а не были просто в центре?

    .container{
    
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .img-card{

      width: 100%;
      max-width: 320px;
      height: 250px;
      margin: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

  .img-card:nth-child(1){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(2){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(3){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: all 1s;
  }
  .img-card:nth-child(1)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(2)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(3)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(4)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(5)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(6)::before{background-color: rgba(223, 223, 223, 0.9);}


  .img-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(-100%);
  transition: all 1s;
}
.img-card:nth-child(1) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);
  }
  .img-card:nth-child(2) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(3) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(4) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(5) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(6) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
.content h2,.content p{
  opacity: 0;
  transition: all 0.3s;
  color: #FAFAFA;
}
.content h2{
  letter-spacing: 1px;
}
.content p{
  font-size: 12px;
}

.img-card:hover::before{transform: translateY(95%);}

.img-card:hover .content {transform: none;}

.img-card:hover h2{
  opacity: 1;
  transition-delay: 0.3s;
} 

.img-card:hover p{
  opacity: 1;
  transition-delay: 0.3s;
} 
<div class="container">
  <div class="img-card">
    <img src="/static/rock1.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock2.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock3.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock4.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock5.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock6.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
</div>


 

4

2 ответа 2

1

Если в плане расположения, то justify-content: space-between;:

.container{
    
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .img-card{

      width: 100%;
      max-width: 320px;
      height: 250px;
      margin: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

  .img-card:nth-child(1){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(2){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(3){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: all 1s;
  }
  .img-card:nth-child(1)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(2)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(3)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(4)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(5)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(6)::before{background-color: rgba(223, 223, 223, 0.9);}


  .img-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(-100%);
  transition: all 1s;
}
.img-card:nth-child(1) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);
  }
  .img-card:nth-child(2) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(3) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(4) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(5) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(6) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
.content h2,.content p{
  opacity: 0;
  transition: all 0.3s;
  color: #FAFAFA;
}
.content h2{
  letter-spacing: 1px;
}
.content p{
  font-size: 12px;
}

.img-card:hover::before{transform: translateY(95%);}

.img-card:hover .content {transform: none;}

.img-card:hover h2{
  opacity: 1;
  transition-delay: 0.3s;
} 

.img-card:hover p{
  opacity: 1;
  transition-delay: 0.3s;
}
<div class="container">
  <div class="img-card">
    <img src="/static/rock1.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock2.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock3.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock4.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock5.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock6.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
</div>

Если в плане заполнения, то блокам задать max-width: 33.333%:

.container{
    
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .img-card{

      width: 100%;
      max-width: 33.333%;
      height: 250px;
      margin: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

  .img-card:nth-child(1){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(2){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(3){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: all 1s;
  }
  .img-card:nth-child(1)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(2)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(3)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(4)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(5)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(6)::before{background-color: rgba(223, 223, 223, 0.9);}


  .img-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(-100%);
  transition: all 1s;
}
.img-card:nth-child(1) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);
  }
  .img-card:nth-child(2) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(3) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(4) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(5) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(6) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
.content h2,.content p{
  opacity: 0;
  transition: all 0.3s;
  color: #FAFAFA;
}
.content h2{
  letter-spacing: 1px;
}
.content p{
  font-size: 12px;
}

.img-card:hover::before{transform: translateY(95%);}

.img-card:hover .content {transform: none;}

.img-card:hover h2{
  opacity: 1;
  transition-delay: 0.3s;
} 

.img-card:hover p{
  opacity: 1;
  transition-delay: 0.3s;
}
<div class="container">
  <div class="img-card">
    <img src="/static/rock1.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock2.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock3.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock4.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock5.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock6.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
</div>

1
  • Ему снова всё равно, дальше блока он почему то не выходит 17 фев 2021 в 9:16
0

Решил с помощью сетки бутстрап а именно col-md-4

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.