一张大图下放三张图

Question

正下方放三张图片

我认为这是可能的，但我该如何解决？

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html,
body {
  background: linear-gradient(to right, #accbee 0%, #e7f0fd 50%);
  height: 100%;
  color: #000;
  background-color: #E5E5E5;
  font-size: 14px;
  font-family: "Maven+Pro", sans-serif;
  line-height: 1;
}

.main {
  display: grid;
}

section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  max-width: 1380px;
  margin: 0 auto;
  padding: 3rem 1rem;
}


.hero img {
  border-radius: 15px;
  display: flex;
  object-fit: fill;

}

.hero .hero-text > * {
  /* Space out the Text and the button inside the hero */
  margin-top: 6rem;
}

.images {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

}

.images img {
  height: 5rem;
  border-radius: 0.8rem;
}

.button-64 {
  align-items: center;
  background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  font-weight: 700;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
}

.button-64:active,
.button-64:hover {
  outline: 0;
}

.button-64 span {
  background-color: rgb(23, 215, 80);
  padding: 16px 44px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}

.button-64:hover span {
  background: none;
}

footer {
  max-width: 1348px;
  background-color: #FFF;
  padding: 3rem;
  border-radius: 1rem;
  display: grid;
  gap: 4rem;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
}

.footer ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: start;
}

.footer div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.footer div a img {
  height: 3rem;
}

.footer ul li a {
  font-size: 1rem;
  text-transform: capitalize;
  font-weight: 500;
  display: block;
  color: rgb(128, 127, 128);
  transition: all 0.5s ease;
}

.footer ul li a:hover {
  color: #0046FF;
  transform: scale(1.1);
}

<div class="main">

  <section class="hero">
    <img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" alt="img">

    <div class="hero-text">
      <h2>Joystick</h2>
      <p>A joystick, sometimes called a flight stick, is an input device consisting of a stick that pivots on a base and reports its angle or direction to the device it is controlling. A joystick, also known as the control column, is the principal control
      device in the cockpit of many civilian and military aircraft, either as a centre stick or side-stick. It often has supplementary switches to control various aspects of the aircraft's flight.</p>

    <button class="button-64" role="button"><span class="text">BUY NOW</span></button>
    </div>
  </section>


  <section>
  <div class="images">
      <img src="https://images.pexels.com/photos/3945657/pexels-photo-3945657.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="img" srcset="">
      <img src="https://images.pexels.com/photos/1298601/pexels-photo-1298601.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="img" srcset="">
      <img src="https://images.pexels.com/photos/21067/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="img" srcset="">
    </div>
</div>
</section>


<!-- Footer -->
<section>
<footer class="footer">

    <ul>
      <li><a href="#">Personal data policy</a></li>
      <li><a href="#">Terms of use</a></li>
      <li><a href="#">Rules</a></li>
    </ul>


    <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">Careers</a></li>
    </ul>

    <div>
      <a href=""><img src="https://img.icons8.com/fluency/344/pinterest.png" alt="I" class="footer__social-link"></a>
      <a href=""><img src="https://img.icons8.com/plasticine/2x/instagram-new--v2.png" alt="T" class="footer__social-link"></a>
      <a href=""><img src="https://img.icons8.com/color/2x/twitter.png" alt="D" class="footer__social-link"></a>
      <a href=""><img src="https://img.icons8.com/color/2x/facebook.png" alt="F" class="footer__social-link"></a>

    </div>

  </div>

</footer>
</section>

他们喜欢旋转木马）。

如何正确放置它们 (grid or Flexbox)？

所有这一切也都具有响应能力。

我正在尝试正确放置它们，但我仍然坚持使用它们...

Answer 1

所以您的布局问题在于您使用了 position:absolute 作为您的三张小图片。这是一种正确的方法：

通过给主容器一个 display: grid

垂直构建内容

每个水平元素，如英雄、三个图像或页脚都应该是那个大包装内的单个容器，如下所示：

<div class="main-wrapper">
<section>Hero</section>
<section>Images</section>
<section>Footer</section>
</div>

.main-wrapper {
  /* Forces each element inside the wrapper to be stacked on top of each other */
  display: grid;
}

section {
 /* display flex forces the items inside each section to be display horizontally */
 max-width: 1300px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

这将为您提供一个坚实的基础布局，您可以进一步扩展您的特殊类和样式。

我分叉了你的codepen并给了它我在这里描述的基本结构。您可以在这里查看：https://codepen.io/cainytheslave/pen/qBxVvyw

一张大图下放三张图

Placing three pictures under a big picture

html

css