时间戳

首页 > 解决方案 > 制作带有图片的员工联系表，我需要使其具有响应性

html - 制作带有图片的员工联系表，我需要使其具有响应性

问题描述

使用 css 网格并希望使其响应移动设备。它在每一行的 (1) 上都有文本和图片以及一个标题，这使得它（无论如何对我来说）有点棘手。

尝试了不同的显示和溢出规则

<wrapper class="grid">
      <h4 class="departmentOne">Sales Department</h4>
      <div class="one">
        <img class="imageBox" src="./images/abdulplaceholder_1.jpeg" />
        <ul>
          <li>Abdul</li>
          <li>Sales Director</li>
          <li>555-5551</li>
        </ul>
      </div>
      <div class="two">
        <img class="imageBox" src="./images/davidplaceholder_1.jpeg" />
        <ul>
          <li>David</li>
          <li>Sales Associate</li>
          <li>555-5552</li>
        </ul>
      </div>
      <h4 class="departmentTwo">Service Department</h4>
      <div class="three">
        <img class="imageBox" src="./images/angieplaceholder_1.jpeg" />
        <ul>
          <li>Angie</li>
          <li>Service Director</li>
          <li>555-5553</li>
        </ul>
      </div>
      <div class="four">
        <img class="imageBox" src="./images/mattplaceholder_1.jpeg" />
        <ul>
          <li>Matt</li>
          <li>Service Advisor</li>
          <li>555-5554</li>
        </ul>
      </div>
      <h4 class="departmentThree">Sales Department</h4>
      <div class="five">
        <img class="imageBox" src="./images/chrisplaceholder_1.jpeg" />
        <ul>
          <li>Chris</li>
          <li>Parts Director</li>
          <li>555-5555</li>
        </ul>
      </div>
      <div class="six">
        <img class="imageBox" src="./images/seanplaceholder_1.jpg" />
        <ul>
          <li>Sean</li>
          <li>Parts Associate</li>
          <li>555-5556</li>
        </ul>
      </div>
      <div class="seven">
        <img class="imageBox" src="./images/jimplaceholder_1.jpeg" />
        <ul>
          <li>Jim</li>
          <li>Parts Associate</li>
          <li>555-5557</li>
        </ul>
      </div>
      <h4 class="departmentFour">Sales Department</h4>
      <div class="eight">
        <img class="imageBox" src="./images/debbieplaceholder_1.jpeg" />
        <ul>
          <li>Debbie</li>
          <li>Finance Director</li>
          <li>555-5558</li>
        </ul>
      </div>
    </wrapper>

CSS

.grid {
  display: grid;
  /* grid-auto-rows: minmax(125px, auto); */
  grid-auto-columns: repeat(auto-fir, minmax(150px, 1fr));
  grid-gap: .5rem;
  overflow: auto;
}
.row {
  width: 290px;
}
.one {
  grid-column: 2;
  grid-row: 1;
  padding: 5px;
}
.two {
  grid-column: 3;
  grid-row: 1;
  padding: 5px;
}
.three {
  grid-column: 2;
  grid-row: 2;
  padding: 5px;
}
.four {
  grid-column: 3;
  grid-row: 2;
  padding: 5px;
}
.five {
  grid-column: 2;
  grid-row: 3;
  padding: 5px;
}
.six {
  grid-column: 3;
  grid-row: 3;
  padding: 5px;
}
.seven {
  grid-column: 4;
  grid-row: 3;
  padding: 5px;
}
.eight {
  grid-column: 2;
  grid-row: 4;
  padding: 5px;
}
.departmentOne {
  padding: 20px;
  grid-column: 1;
  grid-row: 1;
}
.departmentTwo {
  padding: 20px;
  grid-column: 1;
  grid-row: 2;
}
.departmentThree {
  padding: 20px;
  grid-column: 1;
  grid-row: 3;
}
.departmentFour {
  padding: 20px;
  grid-column: 1;
  grid-row: 4;
}

没有错误，但它看起来不像我想要的那样。如果需要，希望它转到一列，但改为水平滚动。

标签： htmlcsscss-grid

解决方案

首先，您有无效的自动调整规则 - 使用grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))而不是grid-auto-columns.

如果需要，希望它转到一列，但改为水平滚动。

这里的主要问题是您使用和定义明确放置所有 div ，因此即使您使用auto-fit，这些列可能根本不会改变，您将失去响应能力。grid-rowgrid-column

仅h4需要使用 - 将其放置在第一列grid-column: 1- 请参见下面的演示：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: .5rem;
  overflow: auto;
}
wrapper > div {
  padding: 5px;
}
wrapper > h4 {
  padding: 20px;
  grid-column: 1;
}
<wrapper class="grid">
      <h4 class="departmentOne">Sales Department</h4>
      <div class="one">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Abdul</li>
          <li>Sales Director</li>
          <li>555-5551</li>
        </ul>
      </div>
      <div class="two">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>David</li>
          <li>Sales Associate</li>
          <li>555-5552</li>
        </ul>
      </div>
      <h4 class="departmentTwo">Service Department</h4>
      <div class="three">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Angie</li>
          <li>Service Director</li>
          <li>555-5553</li>
        </ul>
      </div>
      <div class="four">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Matt</li>
          <li>Service Advisor</li>
          <li>555-5554</li>
        </ul>
      </div>
      <h4 class="departmentThree">Sales Department</h4>
      <div class="five">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Chris</li>
          <li>Parts Director</li>
          <li>555-5555</li>
        </ul>
      </div>
      <div class="six">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Sean</li>
          <li>Parts Associate</li>
          <li>555-5556</li>
        </ul>
      </div>
      <div class="seven">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Jim</li>
          <li>Parts Associate</li>
          <li>555-5557</li>
        </ul>
      </div>
      <h4 class="departmentFour">Sales Department</h4>
      <div class="eight">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Debbie</li>
          <li>Finance Director</li>
          <li>555-5558</li>
        </ul>
      </div>
    </wrapper>

推荐阅读