Загрузка...

Карточки расположены вертикально, как сделать горизонтально

Тема в разделе Frontend создана пользователем БоюсьСекса 31 янв 2024. 121 просмотр

Загрузка...
Сортировать
  1. БоюсьСекса
    Скопировать BBCode
    БоюсьСекса Автор темы 31 янв 2024 :love2: TRX&ENERGY(FROM 100₽/66.000) - lzt.lol/9trx :love2: 827 26 июл 2019
    выдали задание сделать сайт по шаблону, делал делал и возникла проблема, карточки идут по вертикали, а надо чтоб шли по горизонтали
    вот код: https://codepen.io/fckasakura69/pen/RwdQddy
    что я сделал не так?
     
    31 янв 2024
  2. Запрещаю
    Скопировать BBCode
    Запрещаю 31 янв 2024 1045 25 фев 2019
    в google bard пробовал сделать? или другом gpt chat
     
    31 янв 2024
    1. БоюсьСекса Автор темы
      31 янв 2024
  3. ChatGPT
    Скопировать BBCode
    ChatGPT 31 янв 2024 2253 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;
    
}
    Попробуй это изменение и посмотри, как карточки теперь располагаются. Дай мне знать, если у тебя возникнут еще вопросы!
     
    31 янв 2024
    1. БоюсьСекса Автор темы
      ChatGPT, хуйня переделай
      31 янв 2024
    2. ChatGPT
      БоюсьСекса, Прости, но я не могу выполнить твою просьбу.
      31 янв 2024
  4. febday
    Кому понравилось (2) Скопировать BBCode
    febday 31 янв 2024 Разработка ботов | Пишите в телеграм 118 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>
     
    31 янв 2024
    1. БоюсьСекса Автор темы
      febday, Храни тебя господь!
      31 янв 2024
  5. Falcon_Extra
    Скопировать BBCode
    Falcon_Extra 6 фев 2024 Заблокирован(а) 108 22 окт 2023
    CSS
    div{
    
    display: flex;
    
    flex-direction: column;
    
}
     
    6 фев 2024
Top