Загрузка...

Cards are arranged vertically, how to make them horizontally

Thread in Frontend created by АртёмЯйцами Jan 31, 2024. 144 views

Sort
  1. АртёмЯйцами
    АртёмЯйцами Topic starter Jan 31, 2024 1231 Jul 26, 2019
    выдали задание сделать сайт по шаблону, делал делал и возникла проблема, карточки идут по вертикали, а надо чтоб шли по горизонтали
    вот код: https://codepen.io/fckasakura69/pen/RwdQddy
    что я сделал не так?
     
    Jan 31, 2024
  2. Запрещаю
    Запрещаю Jan 31, 2024 1045 Feb 25, 2019
    в google bard пробовал сделать? или другом gpt chat
     
    Jan 31, 2024
    1. АртёмЯйцами Topic starter
      Jan 31, 2024
  3. ChatGPT
    ChatGPT Jan 31, 2024 2250 Mar 14, 2023
    Привет, АртёмЯйцами! Я посмотрел твой код. Проблема в том, что ты используешь flex-direction: column; в своем CSS для карточек. Это заставляет карточки располагаться вертикально. Чтобы сделать их горизонтальными, тебе нужно изменить это свойство на flex-direction: row; в своем CSS. Вот исправленный код:

    HTML

    
.cards {
    
  display: flex;
    
  flex-direction: row; /* изменение направления на горизонтальное */
    
  justify-content: space-around;
    
  align-items: center;
    
  flex-wrap: wrap;
    
}
    Попробуй это изменение и посмотри, как карточки теперь располагаются. Дай мне знать, если у тебя возникнут еще вопросы!
     
    Jan 31, 2024
    1. АртёмЯйцами Topic starter
      ChatGPT, хуйня переделай
      Jan 31, 2024
    2. ChatGPT
      Jan 31, 2024
  4. febday
    Who's liked this post (2)
    febday Jan 31, 2024 Разработка ботов | Пишите в телеграм 117 Apr 29, 2021
    Ну ты просто зачем-то для каждой карточки делаешь свой контейнер и ещё один класс cards, хотя в этом нет смысла
    HTML
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Site</title>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <link rel="stylesheet" href="desctop.css">
    
</head>
    
<body>
    
    
    
<header>
    
    
    
        <div class="logo">
    
            <div class="logo-image"></div>
    
            <div class="logo-text">ЧЕТЫРЕ<br> ЛАПЫ</div>
    
        </div>
    
    
    
        <div class="nav">
    
            <div class="nav-elem"><a href"">О ПРИЮТЕ</a></div>
    
            <div class="nav-elem"><a href"">ПИТОМЦЫ</a></div>
    
            <div class="nav-elem"><a href"">ПОЛЕЗНЫЕ СОВЕТЫ</a></div>
    
            <div class="nav-elem"><a href"">КОНТАКТЫ</a></div>
    
        </div>
    
    </header>
    
    <main>
    

    
<div class="promo">
    
    <h3 class="promo_title">ПРИЮТ ДЛЯ СОБАК <span class="promo_title1">ЧЕТЫРЕ ЛАПЫ</span></h3>
    
    <h3 class="promo_title2">ВОЗЬМИ ДРУГА <span class="promo_title3">ДОМОЙ</span></h3></div>
    
<div class="promo_image"> <img src="Model21.png"></div>
    
<div class="about_company">
    
    <h3 class="about_text">Помогаем людям и питомцам из приютов<br>встретиться и стать друзьями на всю жизнь</h3>
    
    <h3 class="mission">Миссия проекта - формирование культуры ответственного отношения к домашним животным.<br> Решение взять кошку или собаку из приюта должно быть осознанным, именно поэтому мы помогаем<br> потенциальным владельцам не только найти питомца, но и подготовиться к жизни с новым другом.</h3></div>
    
<div class="button">
    
    <h3 class="button1_text">ВЗЯТЬ ПИТОМЦА</h3>
    
    <h3 class="button2_text">ПОМОЧЬ ПРИЮТУ</h3>
    
</div>
    
<div class="our_pets">
    
    <h3 class="our_text">НАШИ ПИТОМЦЫ</h3>
    
</div>
    

    
<div class="container">
    
        <div class="cards">
    
            <div class="card">
    
        <div class="card_content">
    
          <h3 class="card_title">Джек-рассел-терьер</h3>
    
          <p class="card_description">Майло</p>
    
          <div class="card_age">2 года | мальчик
    
            <div class="card_image"> <img src="1.png"></div>
    
            <div class="flex-container"></div>
    
          </div>
    
        </div>
    
      </div>
    
      <div class="card">
    
                <div class="card_content">
    
                    <h3 class="card_title">Лабрадор</h3>
    
                    <p class="card_description">Герта</p>
    
          <div class="card_age">4 года | девочка
    
            <div class="card_image"> <img src="2.png"></div>
    
                      <div class="flex-container"></div>
    
                  </div>
    
        </div>
    
      </div>
    
      <div class="card">
    
                <div class="card_content">
    
                    <h3 class="card_title">лабрадор</h3>
    
                    <p class="card_description">Мартин</p>
    
          <div class="card_age">1,5 года | мальчик
    
            <div class="card_image"> <img src="3.png"></div>
    
            <div class="flex-container"></div>
    
          </div>
    
        </div>
    
      </div>
    
      <div class="card">
    
                <div class="card_content">
    
                    <h3 class="card_title">мопс</h3>
    
                    <p class="card_description">чарли</p>
    
          <div class="card_age">1 год | мальчик
    
            <div class="card_image"> <img src="4.png"></div>
    
            <div class="flex-container"></div>
    
          </div>
    
        </div>
    
       </div>
    
    </div>
    
  </div>
    
    
    
</body>
    
</html>
     
    Jan 31, 2024
    1. АртёмЯйцами Topic starter
      febday, Храни тебя господь!
      Jan 31, 2024
  5. Falcon_Extra
    Falcon_Extra Feb 6, 2024 Banned 108 Oct 22, 2023
    CSS
    div{
    
    display: flex;
    
    flex-direction: column;
    
}
     
    Feb 6, 2024
Loading...
Top