如何将这些图像彼此相邻放置？

Question

我正在为自己建立的网站（用于学校项目）构建投资组合，我希望图像在小于1100px的屏幕上是垂直的，但要使其在大于1100px的屏幕上彼此相邻。这是我的代码

#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文件中

 onEquipmentSelect(equipment,i){
   if(equipment == 'Balance'){
    this.boothData.value.idsDetails[i].idsEquipmentNo = this.balanceData;
    this.equipmentData = this.boothData.value.idsDetails[i].idsEquipmentNo;
   }else if(equipment == 'Barcode') {
    this.boothData.value.idsDetails[i].idsEquipmentNo = this.barCodeDataList;
    this.equipmentData = this.boothData.value.idsDetails[i].idsEquipmentNo;
    }else{
      this.equipmentData = this.noDevice;
    }
  }