Div自动换行问题：网站信息卡片无法横向排列求助

你的核心问题是每个卡片都被单独放在一个占满100%宽度的.center容器里，而.center本身是块级元素（哪怕用了flex，width:100%也会让它占满一行），所以每张卡片自然会换行。

修复步骤： #

1. 将所有卡片放入同一个.center容器中，不要给每个卡片单独套.center
2. 给.center添加flex-wrap: wrap，让卡片在空间不足时自动换行；可选添加justify-content: center让卡片居中排列
3. 给.property-card补上display: flex，否则你写的flex-direction: column不会生效

修改后的代码： #

CSS 部分

*{  
  -webkit-box-sizing: border-box;  
  box-sizing: border-box;
}
.center {
  width:100%;
  display: flex;
  flex-wrap: wrap; /* 新增：空间不足时换行 */
  justify-content: center; /* 可选：让卡片居中排列 */
}
/* End Non-Essential  */
.property-card {
  margin: 10px;
  height:18em;
  width:14em;
  display: flex; /* 新增：启用flex布局 */
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  position:relative;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
  -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */
/* Top Half of card, image. */
.property-image {
  height:6em;
  width:14em;
  padding:1em 2em;
  position:absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('pic/leader.png');
  background-size:cover;
  background-repeat:no-repeat;
}
.property-image2 {
  height:6em;
  width:14em;
  padding:1em 2em;
  position:absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('pic/globe-icon.svg');
  background-size:cover;
  background-repeat:no-repeat;
}
.property-image3 {
  height:6em;
  width:14em;
  padding:1em 2em;
  position:absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('pic/helping-hand-icon-png-23.png');
  background-size:cover;
  background-repeat:no-repeat;
}
/* Bottom Card Section */
.property-description {
  background-color: #FAFAFC;
  height:12em;
  width:14em;
  position:absolute;
  bottom:0em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align:center;
}
/* Property Cards Hover States */
.property-card:hover .property-description {
  height:0em;
  padding:0px 1em;
}
.property-card:hover .property-image, 
.property-card:hover .property-image2, 
.property-card:hover .property-image3 { /* 修正选择器：hover状态要针对当前卡片内的图片 */
  height:18em;
}
.property-card:hover .property-social-icons:hover{
  background-color:blue;
  cursor:pointer;
}

HTML 部分

<div class="center">
  <div class="property-card">
    <div class="property-image">
      <div class="property-image-title">
      </div>
    </div>
    <div class="property-description">
      <h3> Leadership </h3>
      <p>Grow your leadership skills in this team.</p>
    </div>
  </div>

  <div class="property-card">
    <div class="property-image2">
      <div class="property-image-title">
      </div>
    </div>
    <div class="property-description">
      <h3> Environment </h3>
      <p>Help our blue planet become a better place to live in.</p>
    </div>
  </div>

  <div class="property-card">
    <div class="property-image3">
      <div class="property-image-title">
      </div>
    </div>
    <div class="property-description">
      <h3> People </h3>
      <p>Help other people that deserve better lives get better lives.</p>
    </div>
  </div>
</div>

额外修正说明： #

• 原CSS中.property-card:hover .property-image, .property-image2, .property-image3的选择器有问题，.property-image2和.property-image3不会被hover状态触发，已修正为正确的嵌套选择器
• 原HTML中become拼写错误，已修正

内容的提问来源于stack exchange，提问作者JasoPC