我怎样才能把这些图像放在一起？ [复制]

Question

我正在为我建立的网站（用于学校项目）构建一个作品集，我希望我的图像在小于 1100 像素的屏幕上是垂直的，但在大于 1100 像素的屏幕上使它们彼此相邻。这是我的代码

#projects {
  background-color: #7A0000;
  border-bottom: 3px solid black;
  padding: 15px;
}

.project-img {
  width: 325px;
  border: 3px solid black;
  margin: 15px auto;
  display: block;
  transition: 0.3s;
  background-color: #333;
}

.project-img:hover {
  transform: scale(1.03, 1.03);
  transition: 0.3s;
}

@media screen and (min-width: 1100px) {}

<section id="projects">
  <h2 class="subheading">PROJECTS</h2>
  <div id="project-container">
    <a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
  </div>
  <div id="project-container">
    <a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
  </div>
  <div id="project-container">
    <a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
  </div>
</section>

Answer 1

尝试将其添加到您的 css 文件中

@media screen and (max-width: 1100px) {
  .project-img {
    display: block;
  }
}

@media screen and (min-width: 1100px) {
  .project-img {
    width: 1100px;
    display: inline;
  }
}