如何使用 CSS 水平对齐卡片，顶部边框相等？答案

【问题标题】：How to align cards horizontally with an equal top border, with CSS?如何使用 CSS 水平对齐卡片，顶部边框相等？
【发布时间】：2023-02-01 04:34:08
【问题描述】：

如何使用 CSS 将 display: inline-block 卡片水平对齐，顶部边框相等？

为什么打开下面的sn-p时每张卡的top boder都不相等完整页面宽度？我为每个 .card 元素使用了固定的高度和宽度，所以我希望它能对齐。

注意：我也尝试过 display: table-cell 但后来我失去了它是流畅的并且卡片自动适应浏览器宽度的事实（我想保持每行自动数量的卡片，适合浏览器宽度，没有水平滚动条).

#main { width: 100%; }
.cell { display: inline-block; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }

<div id="main">
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla</p>
    </div>
  </div>
</div>
</div>

【问题讨论】：

您可以尝试将 position:absolute 添加到您的容器类中。
@aplua 我试过了，但是 #container div 的右侧可能会溢出一些文本。你会发布一个显示这个的答案吗？另外，为什么absolute 在这里工作？

标签： html css display

【解决方案1】：

#main { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 320px); justify-content: center; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }

<div id="main">
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla</p>
    </div>
  </div>
</div>
</div>

【讨论】：

好主意，但正如问题中所说，它需要自动调整每行正确数量的卡片，没有水平滚动条。这里所有 4 张卡片总是在同一行，当浏览器宽度较小时，这不起作用：在这种情况下，每行只应显示较少的卡片。
那么你就可以使用 CSS Grid 了！我编辑了我的答案，看看这是否是您想要的。您可以使用 CSS Grid 进行各种响应式布局。
这是一篇来自MDN 的文章，让您熟悉 CSS 网格。在组合布局时，它比 Flexbox 灵活和强大得多。

【解决方案2】：

你是说这些线周围的东西吗？

#main { 
 display: flex;
 gap: 40px;
 flex-wrap: wrap;
 width: 100%;
}
.cell { display: inline-block; }
.card { border: 1px solid black; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }

    <div id="main">
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla blablabla</p>
            </div>
          </div>
        </div>
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
            </div>
          </div>
        </div>
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla blablabla</p>
            </div>
          </div>
        </div>
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla</p>
            </div>
          </div>
        </div>
        </div>

【讨论】：

好主意@Mordor，但正如问题中所述，它需要在没有水平滚动条的情况下自动调整每行正确数量的卡片。这里所有 4 张卡片总是在同一行，当浏览器宽度较小时，这不起作用。
在这种情况下，您可以添加 flex-wrap: wrap; 并指定宽度，它将自动排列内容
@Basj 更新了答案，您可以转到 code sn-p 并单击整页，然后使用开发人员工具窗口压缩内容：D

【解决方案3】：

您可以将 vertical-align: middle 添加到您的单元格类中。

.cell { display: inline-block; vertical-align: middle;}

【讨论】：

【解决方案4】：

完全使用 flex 和 grid 超级简单。 Flex 有利于自我居中和调整。网格将帮助我们调整整个页边距和对齐方式：

.container {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

您可以根据需要调整卡片的宽度和高度，还可以根据需要修改填充和文本对齐方式。

【讨论】：