使我的 2 div 在屏幕上堆叠小于 600px

Question

当屏幕宽度低于 600 像素时，我无法将 2 个 div 堆叠在一起。我试过向它添加 flexbox，但它似乎并不适合我。 HTML

<main>
  <section class="home-hero">
    <div class="hero-text">
      <h1>Psykolog<br> Mathias Spangsberg Andersen</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="hero-img">
        <img src="img/portræt.jpg" alt="Portræt Mathias Andersen">
        <a class="order-button" href="bestil-tid.html">Bestil tid</a>
    </div>
  </section>
  </main>

CSS 桌面版

.home-hero {
  position: relative;
  margin-top: 0px;
  background-image: url(../img/forside.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  background-blend-mode: luminosity;
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero-text {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}

.hero-img {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}
.hero-text h1::first-line {
  font-size: 30px;
  font-style: bold;
}
.hero-text h1 {
  font-size: 25px;
  text-align: center;
  padding-top: 25px;
}
.hero-text p {
  padding: 10px 25px 0;
  text-align: left;
}
.hero-img img {
  display: block;
  width: auto;
  height: 70%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
}
.order-button {

  width: 200px;
  height: 50px;
  background-color: #27B9E5;
  color: black;
  text-decoration: none;
  line-height: 2;
  text-align: center;
  font-size: 25px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  transition: 1s;
  margin-bottom: 20px;
}
.order-button:hover {
  background-color: #22A4CC;
  color: white;
  border-radius: 15px;
  transition: 0.3s;
}

CSS 平板电脑

@media screen and (min-width:720px) and (max-width:1200px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;

    margin: 40px 40px;
  }
  .hero-text h1::first-line {
    font-size: 30px;
    font-weight: 900;
  }
  .hero-text h1 {
    font-size: 25px;
    text-align: center;
  }
  .hero-text p {

    margin-bottom: 100px;
    text-align: left;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;
    margin: 40px 40px;
  }
  .order-button {
    display: block;
    width: 70%;
    height: 10%;
    background-color: #27B9E5;
    color: black;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    margin-top: -10px;
  }
}

CSS 手机版

@media screen and (min-width:0px) and (max-width:720px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
}

非常感谢任何建议，因为我真的希望它能工作。其他更正、建议和建议非常受欢迎。祝你有美好的一天

Answer 1

使您的容器 .home-hero 成为媒体查询中的弹性列。

.home-hero {
    flex-direction:column;
}

Answer 2

您可以通过在 css 中添加以下内容来实现此目的：

@media screen and (max-width: 600px) {
  .home-hero {
      flex-direction: column;
   }
}

.home-hero {
  position: relative;
  margin-top: 0px;
  background-image: url(../img/forside.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  background-blend-mode: luminosity;
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero-text {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}

.hero-img {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}

.hero-text h1::first-line {
  font-size: 30px;
  font-style: bold;
}
.hero-text h1 {
  font-size: 25px;
  text-align: center;
  padding-top: 25px;
}
.hero-text p {
  padding: 10px 25px 0;
  text-align: left;
}
.hero-img img {
  display: block;
  width: auto;
  height: 70%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
}
.order-button {

  width: 200px;
  height: 50px;
  background-color: #27B9E5;
  color: black;
  text-decoration: none;
  line-height: 2;
  text-align: center;
  font-size: 25px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  transition: 1s;
  margin-bottom: 20px;
}
.order-button:hover {
  background-color: #22A4CC;
  color: white;
  border-radius: 15px;
  transition: 0.3s;
}

@media screen and (min-width:720px) and (max-width:1200px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;

    margin: 40px 40px;
  }
  .hero-text h1::first-line {
    font-size: 30px;
    font-weight: 900;
  }
  .hero-text h1 {
    font-size: 25px;
    text-align: center;
  }
  .hero-text p {

    margin-bottom: 100px;
    text-align: left;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;
    margin: 40px 40px;
  }
  .order-button {
    display: block;
    width: 70%;
    height: 10%;
    background-color: #27B9E5;
    color: black;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    margin-top: -10px;
  }
}
@media screen and (min-width:0px) and (max-width:720px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .home-hero {
      flex-direction: column;
   }
}

<main>
  <section class="home-hero">
    <div class="hero-text">
      <h1>Psykolog<br> Mathias Spangsberg Andersen</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="hero-img">
        <img src="img/portræt.jpg" alt="Portræt Mathias Andersen">
        <a class="order-button" href="bestil-tid.html">Bestil tid</a>
    </div>
  </section>
  </main>

Answer 3

使用最小宽度和 flex-wrap...

HTML

<flex-box>
  <div></div>
  <div></div>
</flex-box>

CSS

flex-box {
  display: flex;
  width: 100%;

  // magic
  flex-wrap: wrap;

  div {
    //styling
    background: #ccc;
    height: 200px;
    margin: 1em;
    flex: 1;

    // magic
    min-width: 600px;
  }
}

我从头开始写这篇文章，以便您和其他人可以轻松了解它是如何完成的。将 max-width、min-width 与 flex-wrap 一起使用可以让您避免媒体查询更改为移动堆栈的需要。

使我的 2 div 在屏幕上堆叠小于 600px

Make my 2 divs stack on screen smaller than 600px

html

javascript

css

responsive