如何用CSS使卡片水平对齐并具有相等的上边框？

mzsu5hc0 于 2023-02-01 发布在其他

关注(0)|答案(4)|浏览(112)

- 如何使用CSS将display: inline-block卡片水平对齐并使其具有相等的上边框？**

当你以 * 整页 * 宽度打开下面的代码片段时，为什么每张卡片的顶部边框不相等？我对每个.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>

css

来源：https://stackoverflow.com/questions/72931383/how-to-align-cards-horizontally-with-an-equal-top-border-with-css

4条答案

按热度按时间

nafvub8i1#

#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>

赞(0）回复(0）举报 2023-02-01

7hiiyaii2#

你是指这几行的周围吗？

#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>

赞(0）回复(0）举报 2023-02-01

wwtsj6pe3#

您可以添加垂直对齐：在你的牢房里。

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

赞(0）回复(0）举报 2023-02-01

mtb9vblg4#

使用Flex和网格非常简单。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;
}

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

赞(0）回复(0）举报 2023-02-01

我来回答

如何用CSS使卡片水平对齐并具有相等的上边框？

4条答案

相关问题

热门标签

最新问答