制作一个响应绝对项目的部分

Question

我正在建立一个响应式网站，一切都很好，除了一件事是服务部分，其中包含一些绝对定位的项目没有响应。

我想要的是当我减小视口宽度时，项目会缩小一点并彼此靠近，并且在大视口中它们会扩展以占据整个可用空间。

我试图通过使用媒体查询来获得此行为，但我认为这不是最佳解决方案。

这是我的代码的snippet。

HTML

  <section class="services">
    <img class="service-image" src="https://images.unsplash.com/photo-1474564862106-1f23d10b9d72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1068&q=80" alt="">
    <h1 class="title-service">
      services
    </h1>
    <div class="quality-cuisine-box">
      <i class="fas fa-concierge-bell icon cuicon"></i>
      <h2 class="service-title">quality cuisine</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux
      </p>
    </div>
    <div class="freindly-staff-box">
      <i class="fas fa-smile-beam icon cuicon"></i>
      <h2 class="service-title">freindly staff</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux</p>
    </div>
    <div class="fresh-food-box">
      <i class="fas fa-fish icon cuicon"></i>
      <h2 class="service-title">fresh food</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux</p>
    </div>

  </section>

CSS

   .service-image {
      max-width: 100%;
      width: 100vw;
      position: relative;
    }

    .services {
      position: relative;
    }

    .title-service {
      position: absolute;
      color: white;
      top: 0;
      width: 100%;
      text-align: center;
      font-family: Roboto;
    }

    .cuicon {
      display: block;
      text-align: center;
      font-size: 1.5rem;
    }

    .quality-cuisine-box {
      position: absolute;
      top: 2.25rem;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
    }

    .freindly-staff-box {
      position: absolute;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      top: 2.25rem;
      left: 10rem;

    }

    .fresh-food-box {
      position: absolute;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      top: 2.25rem;
      left: 19rem;
    }

Answer 1

将图像作为绝对覆盖视图端口并从所有其他元素中删除绝对值。或者你可以使用display: flex使你的布局健壮。

    .services {
      position: relative;
      overflow: hidden;
    }

    .quality-cuisine-box, .freindly-staff-box, .fresh-food-box {
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      float: left;
      width: 33%;
      vertical-align: middle;
    }
    .service-image {
      max-width: 100%;
      width: 100vw;
      position: absolute;
      z-index: -1;
    }

Answer 2

试试这段代码：

<section class="services">
<img class="service-image" src="https://images.unsplash.com/photo-1474564862106-1f23d10b9d72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1068&q=80" alt="">

<div class="quality-cuisine-box">
  <i class="fas fa-concierge-bell icon cuicon"></i>
  <h2 class="service-title">quality cuisine</h2>
  <p class="service-description">Le Lorem Ipsum est <br>
    simplement du faux
  </p>
</div>
<div class="freindly-staff-box">
  <i class="fas fa-smile-beam icon cuicon"></i>
  <h2 class="service-title">freindly staff</h2>
  <p class="service-description">Le Lorem Ipsum est <br>
    simplement du faux</p>
</div>
<div class="fresh-food-box">
  <i class="fas fa-fish icon cuicon"></i>
  <h2 class="service-title">fresh food</h2>
  <p class="service-description">Le Lorem Ipsum est <br>
    simplement du faux</p>
</div>

和css：

.service-image {
  max-width: 100%;
  width: 100vw;
  position: absolute;
  z-index: -1;
}

.services {
  width: 100vw;
 display: grid;
 grid-template-columns: auto auto auto;}

 .title-service {

  color: white;
  top: 0;
  width: 100%;
  text-align: center;
  font-family: Roboto;
}

.cuicon {
  display: block;
  text-align: center;
  font-size: 1.5rem;
}

.quality-cuisine-box {
  text-align: center;
  top: 2.25rem;
  color: white;
  font-family: roboto;
  font-size: 0.75rem;
}

.freindly-staff-box {
     text-align: center;
  color: white;
  font-family: roboto;
  font-size: 0.75rem;
  top: 2.25rem;
  left: 10rem;

}

.fresh-food-box {
  text-align: center;
  color: white;
  font-family: roboto;
  font-size: 0.75rem;
  top: 2.25rem;
  left: 19rem;
}

而不是顶部你应该使用每个框的填充顶部