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;
}

而不是顶部，您应该对每个框使用padding-top

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

2 个答案: