如何使用inline-block实现3个卡片元素横向排列？

为啥你的inline-block没生效？ #

你给.card加了display: inline-block，理论上应该能横向排，但可能是这两个细节拖了后腿：

1. 你只在HTML里放了1个卡片，当然看不到横向排列效果；
2. 就算加了3个，当前.card的宽度30%+左右各1% margin，总占用宽度是30%*3 + 1%*6 = 96%（每个卡片左右各1%，3个就是6个1%），虽然理论能放下，但容器的padding或浏览器计算误差可能导致卡片挤到下一行。

下面给你两种靠谱的解决方法：

方法一：修复inline-block布局 #

调整卡片宽度，确保总占用宽度不超100%，同时保留font-size:0消除inline-block元素间的空白间隙。

修改.card的CSS：

.card {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  background: white;
  width: 31%; /* 调整宽度，让总占用更合理 */
  height: auto;
  margin: 0 1%;
  margin-bottom: 2%;
  border-radius: 10px;
  border-style: solid;
  border-color: rgb(90, 16, 141);
}

然后在HTML里添上3个卡片：

<div class="cards_container">
  <div class="card">
    <img src="siteimages/CS3W.jfif" class="card_image">
    <p class="card_title_p"><b>HiKu (CS3W)</b></p>
    <div class="card_p">Model: CS3W<br> Cell type: Mono-crystalline<br> Power range: 430~455 W<br> Max. system Voltage: 1400V<br> Connector type: T4 or H4 UTX or MC4-EVO2</div>
    <div class="card_info" onclick="window.location.assign('ugabuga.html');">Learn more</div>
  </div>
  <div class="card">
    <img src="siteimages/CS3W.jfif" class="card_image">
    <p class="card_title_p"><b>HiKu (CS3W)</b></p>
    <div class="card_p">Model: CS3W<br> Cell type: Mono-crystalline<br> Power range: 430~455 W<br> Max. system Voltage: 1400V<br> Connector type: T4 or H4 UTX or MC4-EVO2</div>
    <div class="card_info" onclick="window.location.assign('ugabuga.html');">Learn more</div>
  </div>
  <div class="card">
    <img src="siteimages/CS3W.jfif" class="card_image">
    <p class="card_title_p"><b>HiKu (CS3W)</b></p>
    <div class="card_p">Model: CS3W<br> Cell type: Mono-crystalline<br> Power range: 430~455 W<br> Max. system Voltage: 1400V<br> Connector type: T4 or H4 UTX or MC4-EVO2</div>
    <div class="card_info" onclick="window.location.assign('ugabuga.html');">Learn more</div>
  </div>
</div>

方法二：用Flex布局（更省心） #

现在没人还纠结inline-block的空白间隙了，Flex布局直接搞定，还能自动适配小屏幕换行。

改.cards_container的CSS：

.cards_container {
  margin: 50px auto 0;
  padding: 0 150px;
  max-width: 2000px;
  display: flex; /* 开启flex布局 */
  flex-wrap: wrap; /* 屏幕宽度不足时自动换行 */
  gap: 2%; /* 卡片之间的空隙，比margin更直观 */
}

再改.card的CSS，去掉inline-block，调整宽度：

.card {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  background: white;
  width: calc(33.333% - 1.333%); /* 3个卡片平分容器，减去gap的影响 */
  height: auto;
  margin-bottom: 2%;
  border-radius: 10px;
  border-style: solid;
  border-color: rgb(90, 16, 141);
}

这样设置后，3个卡片稳稳排在一行，缩小屏幕还会自动换行，完美解决问题。

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