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

Пустое место (вы увидите, когда введете код) — это место, где карты должны быть сложены в столбец с такой ориентацией, как эта У меня возникают проблемы с размещением этих карточек между нижним колонтитулом, заголовком и боковой панелью

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}

<div class = "header">
  MY AWESOME WEBSITE
</div>

<div class = "contents">

  <div class = "sidebar">
    <a href = "google.com">⭐ - link one</a>
    <a href = "google.com">??‍♂️ - link two</a>
    <a href = "google.com">?️ - link three</a>
    <a href = "google.com">?? - link four</a>
  </div>
  <div class = "Cards">
    <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class = "card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  </div>
</div>
<div class = "footer">
  The Odin Project ❤️
</div>

Я бы предпочел, чтобы решение было найдено ТОЛЬКО с использованием flexbox, без маржи или чего-то еще.

html css flexbox

19.03.2022 18:32

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это легко сделать с помощью Grid Layout. Просто изменил контейнер contents на flex и использовал grid для контейнера Cards.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.contents {
  display: flex;
}

.Cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
  padding: 12px;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>The Holy Grail</title>
  <link rel = "stylesheet" href = "style.css">
</head>

<body>
  <div class = "header">
    MY AWESOME WEBSITE
  </div>

  <div class = "contents">

    <div class = "sidebar">
      <a href = "google.com">⭐ - link one</a>
      <a href = "google.com">??‍♂️ - link two</a>
      <a href = "google.com">?️ - link three</a>
      <a href = "google.com">?? - link four</a>
    </div>
    <div class = "Cards">
      <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
      <div class = "card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
      <div class = "card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
      <div class = "card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div>
  <div class = "footer">
    The Odin Project ❤️
  </div>
</body>

</html>

Значения ссылок href должны начинаться с https:// или http://. Я бы предложил отредактировать, но очередь заполнена.

— 19.03.2022 19:28

19.03.2022 18:52

Используйте обертку атрибутов flex !! flex-wrap: обернуть; Используя это, ваша белая карточка автоматически опустится, сделав разрыв строки.

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

— 20.03.2022 08:07

19.03.2022 18:59

Ответ принят как подходящий

Решение с использованием запрошенного flex. В этом случае вы должны установить flex для главного родителя .contents.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.contents {
  display: flex;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}

<div class = "header">
  MY AWESOME WEBSITE
</div>

<div class = "contents">

  <div class = "sidebar">
    <a href = "google.com">⭐ - link one</a>
    <a href = "google.com">??‍♂️ - link two</a>
    <a href = "google.com">?️ - link three</a>
    <a href = "google.com">?? - link four</a>
  </div>
  <div class = "Cards">
    <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class = "card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class = "card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  </div>
</div>
<div class = "footer">
  The Odin Project ❤️
</div>

19.03.2022 19:02

Другие вопросы по теме

Создание div для каждого данных

Bootstrap 5 Индикатор слайдов карусели не работает

Попытка скрыть псевдоэлемент в фокусе ввода через ~

CSS выбрать элемент строки в сетке

Есть ли способ изменить цвет текста в текстовом поле?

Как отключить кнопку отправки после клика

Как изменить цвет фона модального окна?

Justify-content выравнивает однострочный текст, но не когда текст занимает несколько строк

Как получить соотношение сторон в HTML и CSS?

Условно переопределить стиль AntD Select в CSS

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

Ответы 3

Другие вопросы по теме

Похожие вопросы