使具有绝对项目的部分响应

Question

我正在构建一个响应式网站，一切正常，除了一件事，即包含一些具有绝对定位的项目的服务部分没有响应。

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

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

这是我的代码 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;
}

你应该为每个框使用 padding-top 而不是顶部

使具有绝对项目的部分响应

Make a section with absolute items responsive

html

css

responsive