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

Question

[Константин]

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

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

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:[phone]">
                    <h5>[phone]</h5></a>

            </div>
    </div>

Comments

[Ankhena]

На ваш выбор гридами или флексами.

Что именно не получилось? Выложите код с тем, что вы делали на codepen.io

[Константин]

Ankhena, https://codepen.io/kostyabagr/pen/QWrrawP вот пожалйста. фотки можете любые подставить

[Ankhena]

Константин,

фотки можете любые подставить

Да нет, это вы можете подставить любые фотки, чтобы показывать свои наработки. А не я или кто-то другой за вас.
Но тут фотки не принципиальны.

Разумно: карточки обернуть в список и этот список сделать гридом или флексом.

[Константин]

Ankhena, а можете скинуть пример? я просто frontend разработкой толком не занимаюсь)))

[Mizutsune]

еще вопрос. как прибить логотип и фотку телеграмма к правому и левому краю, чтобы их положение не зависело от размера экрана

Правило 3.7 сайта.

[Ankhena]

Константин,

еще вопрос. как прибить логотип и фотку телеграмма к правому и левому краю, чтобы их положение не зависело от размера экрана

Например, флексами и justify-content: space-between

Саму иконку делать псевдоэлементом.

Внутри ссылки на номер телефона не должно быть h5. Ведь вряд ли это заголовок.

Answer 1

[Mizutsune]

Можно конечно сделать и так как вам подсказали в соседнем ответе:

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

.card { 
   width: fit-content; 
}

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



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



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

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

Указываем минимальную и максимальную ширину карточек, тем самым запрещаем растягиваться элементам, что обеспечит корректную работу свойства: justify-content: space-between;

Answer 2

[Sergei Nazarenko]

Comments

[Константин]

Боже мой, больше вам спасибо, удачи, всего наилучшего!!

Answer 3

[Ренат]

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

Comments

[Константин]

не.не помогает, но спасибо за коммент