карта в конце деления

Question

Здравствуйте, я искал и ничего не нашел, я хотел бы положить карты в конце div, как это:

Я представляю, что будет Я имею дело с абсолютным и относительным положением, но я не могу представить, как поставить два div'а

код:

export default function App() {
  return (
    <div className="Container">
      <div className="Header" />
      <div className="Content">
        <div className="Carousel" />
        <div className="main" />
      </div>
      <div className="footer">a</div>
    </div>
  );
}

css:

body {
  margin: 0;
  height: 100vh;
}
.App {
  font-family: sans-serif;
  text-align: center;
}

.Container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
}
.Header {
  position: relative;
  height: 80px;
  flex: none;
  background: #000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.Content {
  flex: 1;
}
.Carousel {
  background: #1976d2;
  background-image: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
  flex: none;
  height: 280px;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 128px !important;
  padding-bottom: 128px !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
}
.main {
  height: 400px;
  background: yellow;
  padding: 0 0.625em;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 97.2307692rem !important;
}

.footer {
  max-height: 40px;
  height: 40px;
  height: 100%;
  background: red;
  flex: none;
}

пример для codeandbox:

https://codesandbox.io/s/angry-mestorf-6kmmo

Answer 1

Сделайте Div с вашими картами и поместите его абсолютно между двумя разделами. Я положил его в первый раздел.

main {
  display: flex;
  flex-direction: column;
}

section {
  position: relative;
  height: 50vh;
  background-color: green;
}

section:last-of-type {
  background-color: yellow;
}

.cards {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin: 0px auto;
  border: 1px solid red;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  z-index: 10;
}

.card {
  width: 60px;
  height: 60px;
  background-color: #fff;
}

<main>
  <section>
    <div class="cards">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </div>
  </section>
  <section>
    <p>Hi</p>
  </section>
</main>

Answer 2

С советами от @ Jhecht

код:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="Container">
      <div className="Header" />
      <div className="Content">
        <div className="Carousel" />
        <div className="main">
          <div
            className="card"
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              background: "transparent",
              height: "200px"
            }}
          >
            <div
              style={{
                height: "400px",
                marginRight: "10px",
                background: "green",
                width: "350px"
              }}
            />
            <div
              style={{
                height: "400px",
                marginRight: "10px",
                background: "black",
                width: "350px"
              }}
            />
            <div
              style={{ height: "400px", background: "green", width: "350px" }}
            />
          </div>
        </div>
      </div>
      <div className="footer">a</div>
    </div>
  );
}

css:

body {
  margin: 0;
  height: 100vh;
}
.App {
  font-family: sans-serif;
  text-align: center;
}

.Container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
}
.Header {
  position: relative;
  height: 80px;
  flex: none;
  background: #000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.Content {
  flex: 1;
}
.Carousel {
  position: relative;
  background: #1976d2;
  background-image: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
  flex: none;
  height: 280px;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 128px !important;
  padding-bottom: 128px !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
}
.main {
  height: 400px;
  background: yellow;
  padding: 0 0.625em;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 97.2307692rem !important;
}

.footer {
  max-height: 40px;
  height: 40px;
  height: 100%;
  background: red;
  flex: none;
}

.card {
  transform: translateY(-100px);
}

Answer 3

Просто добавьте в свой код 3 карты:

<div className="Container">
  <div className="Header" />
  <div className="Content">
    <div className="Carousel" />
    <div className="cardContainer">
      <div className="card">Card 1</div>
      <div className="card">Card 2</div>
      <div className="card">Card 3</div>
    </div>
    <div className="main" />
  </div>
  <div className="footer">a</div>
</div>

И затем используйте css, чтобы отрегулировать их:

• Высота cardContainer должна быть установлена ​​на 0, чтобы избежать расстояния между другие элементы div
• могут использовать отрицательный маржинальный отступ для cardContainer или отдельные элементы div для размещения их "в конце элемента div" *
• z-index может потребоваться для предотвращения их перехода div
• display flex и justify-content используются для размещения 3 div на одинаковом расстоянии.

CSS

.cardContainer {
  height: 0px;
  display: flex;
  justify-content: space-around;
  margin-top: -150px;
}

.cardContainer div {
  background-color: white;
  padding: 100px 50px;
  z-index: 10;
}