Question

我的问题是关于移动设备中的图片（Photo Two）没有逐个显示，并且超越了＆＃34;项目＆＃34;部分高度限制并下至＆＃34;联系＆＃34;部分。有人可以建议我一个解决方案吗？在Photo One中，您可以看到它们在桌面视图中的显示方式。

＆＃13;

#projects {
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.img-wrap {
  padding-top: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.img-img {
  border-radius: 12px;
  max-width: 270px;
  width: 100%;
}

＆＃13;

<div id="projects">
  <div class="container">
    <h1 class="work-title-1">My Recent Work</h1>
    <h2 class="work-title-2">"Here are a few recent design projects. Want to see more?"
      <a href="#">Email me.</a>
    </h2>
    <div class="row">
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

如果您正在使用flex来逐个显示它们，我建议您使用：

.row {
 display: flex;
 flex-direction: column;
}

如果您不希望它们逐个出现在PC上，请尝试使用适合每种类型屏幕的@media屏幕。对于pc使用： flex-direction：row 。

我希望能帮助你，

问候。

移动视图上的图像无法正常显示

1 个答案: