@robocop45
Only python

Как расположить карточки в ряд?

Вот так выглядят карточки сейчас:

63394c40c126e457014424.png

Надо чтобы они стояли так:

63394a91b736a379597717.png

html карточка
<div class="card style_1" style="width: 20rem; height: 25rem;">
    <img class="card-img-top" src="/img/lenovo 3.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-secondary">Go somewhere</a>
    </div>
  </div>

  <div class="card style_2" style="width: 20rem; height: 25rem;">
    <img class="card-img-top" src="/img/lenovo 3.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-secondary">Go somewhere</a>
    </div>
  </div>

  <div class="card style_3" style="width: 20rem; height: 25rem;">
    <img class="card-img-top" src="/img/lenovo 3.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-secondary">Go somewhere</a>
    </div>
  </div>

header(где находится лого и другие элементы)

<div class="head">
    <div class="container">
        <nav class="navbar container">
            <a class="navbar-brand logo-top" href="#">
                <img class="logo" src="/img/logo1.1.jpg" width="150" height="50" class="d-inline-block"
                     alt="" loading="lazy">

            </a>
            <a href="https://web.telegram.org/k/" target="_blank">
                <img class="tgphoto" src="/img/tg.png" height="50px">
            </a>
            <!-- <a  class="about-us" href="#">О нас</a> -->
            <div class="contact-top">

                <a class="phone-number text-light" href="tel:+74957777777">
                    <h5>+7(495)-777-77-77</h5></a>

            </div>
    </div>

  • Вопрос задан
  • 111 просмотров
Решения вопроса 2
mizutsune
@mizutsune
Frontend Developer
Можно конечно сделать и так как вам подсказали в соседнем ответе:

.container{ 
  display: flex;
  justify-content: space-around;
}

.card { 
   width: fit-content; 
}


Но в таком случае, если какая-нибудь карточка будет больше по ширине, тогда равномерного расположения по центру уже не будет.

63397efd5efe3045799569.png

Можно сделать по другому, например используя CSS Grid:



Суть в том что в этой строке:

grid-template-columns: repeat(auto-fill, minmax(310px, 310px));


Указываем минимальную и максимальную ширину карточек, тем самым запрещаем растягиваться элементам, что обеспечит корректную работу свойства: justify-content: space-between;
Ответ написан
Комментировать
nazares
@nazares
Software Engineer
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Keylei
@Keylei
.card {
    display: flex;
    justify-content: space-around;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы