更改两个上框（文本/图像）大小的问题

Question

我正在尝试使我的网站具有响应性，并且对于移动设备和 iPad，它似乎运行良好，但对于台式机，我遇到了问题。我试图弄清楚如何扩展两个上面的框（图像和文本）。我的网站现在看起来像这样：

但结果应该如左图所示：

这是我上面两个框的 HTML：

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Montserrat:wght@100&family=Open+Sans+Condensed:wght@300;700&display=swap');
body {
  margin: 0%;
  font-family: 'Montserrat', sans-serif;
  background-color: #f2f2f0;
}


/* Header  */

header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  color: #d0c8b6;
}

a {
  text-decoration: none;
}

.headertext {
  font-family: 'Amatic SC', cursive;
  font-size: 50px;
  margin-right: 40px;
}

.title {
  display: flex;
  font-family: 'Amatic SC', cursive;
}

.logo {
  width: 80px;
  border-radius: 50%;
  margin-left: 40px;
}


/*  The bigger news   */

nav {
  display: none;
  font-size: 14px;
}

nav div {
  width: 30%;
  display: flex;
  justify-content: space-between;
}

.header-box {
  display: flex;
  margin: 0%;
  justify-content: center;
}


/* The other news   */

.flex-parent1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-parent2 {
  display: flex;
  height: 100px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.child1 {
  margin-bottom: 20px;
}

.image {
  height: auto;
  width: auto;
  display: inline;
}

.text {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0px;
  width: 350px;
  text-align: justify;
}

.footer-text {
  color: black;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: center;
}

.date {
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
}

.image {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}

.image1 {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}


/* Mobile */

@media (min-width: 668px) {
  header {
    justify-content: center;
  }
  nav {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .headertext {
    display: none;
  }
  .title {
    display: none;
  }
  .menu {
    display: none;
  }
  .logo {
    position: absolute;
  }
}


/* Desktop */

@media (min-width: 1025px) {
  header {
    justify-content: space-between;
  }
  nav {
    width: 60%;
    justify-content: space-evenly;
  }
  .logo {
    position: static;
  }
  .headertext {
    display: block;
  }
}

<div class="flex-parent1">

  <div class="child1">
    <img class="image" src="https://images.pexels.com/photos/5581939/pexels-photo-5581939.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="image1" />
  </div>

  <div class="child2">
    <p class="text">Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. Tourists
      go to various destinations, countries with great landmarks, places with lovely beaches or simply areas of wilderness and untouched nature. In the last few decades tourism has grown very much, mostly because people’s lifestyles have changed. They
      don’t want to stay at home any more. They spend more money on travelling than previous generations did. Travelling has also become cheaper and more affordable. The rise of budget airlines has made it possible to afford trips to faraway countries.
      Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. he rise
      of budget airlines has made it possible to afford trips to faraway countries. about other cultures or just relax from stressful working life. he rise of budget airlines has made it possible to.</p>
  </div>

</div>

Answer 1

如果您所说的“展开”是指将它们排成一排以获得更大的屏幕，只需将 flex 方向默认设置为 row，并且您已经为移动设备覆盖了它。

以全屏模式查看此演示并调整大小。

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Montserrat:wght@100&family=Open+Sans+Condensed:wght@300;700&display=swap');
body {
  margin: 0%;
  font-family: 'Montserrat', sans-serif;
  background-color: #f2f2f0;
}


/* Header  */

header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  color: #d0c8b6;
}

a {
  text-decoration: none;
}

.headertext {
  font-family: 'Amatic SC', cursive;
  font-size: 50px;
  margin-right: 40px;
}

.title {
  display: flex;
  font-family: 'Amatic SC', cursive;
}

.logo {
  width: 80px;
  border-radius: 50%;
  margin-left: 40px;
}


/*  The bigger news   */

nav {
  display: none;
  font-size: 14px;
}

nav div {
  width: 30%;
  display: flex;
  justify-content: space-between;
}

.header-box {
  display: flex;
  margin: 0%;
  justify-content: center;
}


/* The other news   */

.flex-parent1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-parent2 {
  display: flex;
  height: 100px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.child1 {
  margin-bottom: 20px;
}

.image {
  height: auto;
  width: auto;
  display: inline;
}

.text {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0px;
  width: 350px;
  text-align: justify;
}

.footer-text {
  color: black;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: center;
}

.date {
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
}

.image {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}

.image1 {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}


/* Mobile */

@media (min-width: 668px) {
  header {
    justify-content: center;
  }
  nav {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .headertext {
    display: none;
  }
  .title {
    display: none;
  }
  .menu {
    display: none;
  }
  .logo {
    position: absolute;
  }
}


/* Desktop */

@media (min-width: 1025px) {
  header {
    justify-content: space-between;
  }
  nav {
    width: 60%;
    justify-content: space-evenly;
  }
  .logo {
    position: static;
  }
  .headertext {
    display: block;
  }
}

<div class="flex-parent1">
  <div class="child1">
    <img class="image" src="https://images.pexels.com/photos/5581939/pexels-photo-5581939.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="image1" />
  </div>

  <div class="child2">
    <p class="text">Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. Tourists
      go to various destinations, countries with great landmarks, places with lovely beaches or simply areas of wilderness and untouched nature. In the last few decades tourism has grown very much, mostly because people’s lifestyles have changed. They
      don’t want to stay at home any more. They spend more money on travelling than previous generations did. Travelling has also become cheaper and more affordable. The rise of budget airlines has made it possible to afford trips to faraway countries.
      Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. he rise
      of budget airlines has made it possible to afford trips to faraway countries. about other cultures or just relax from stressful working life. he rise of budget airlines has made it possible to.</p>
  </div>
</div>