Question

我有一个包含一些卡片的容器，我希望每张卡片都从容器的左边界开始，到右边界结束，就像下面的代码一样。

<html>
<style>
  .container {
    display: flex;
    justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
  }
   .card{
 border:1px solid black;
}
</style>

<body>
  <div class="container">
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
  </div>
</body>

</html>

但是最后2个元素之间有太多空间，如何删除？？

我尝试添加margin-left/right以使其表现出我想要的效果，但是角落卡没有碰到边界。有帮助吗？

编辑：这是我的期望，

以及我得到的

Answer 1

这是由于justify-content: space-between的行为。了解justify-content访问here

的行为

要实现您想要的目标，可以将container设置为block element，并将子级设置为像float:left一样浮动。

为了避免多余的空格，我删除了margin-left的{{1}}的{{1}}和.card:first-child的{{1}}

您可以通过以下方式专门设置每行margin-right内容的数量设置公共宽度并清除.card:last-child空间 card。目前，我为每行5个元素制作了这段代码

margin

nth-child

Answer 2

我不太确定自己是否重新创建了您的问题，但这是一个可以帮助您的codepen https://codepen.io/salallegra/pen/mQbBea。

<html>
<style>
    .container {
        display: flex;
        justify-content: space-between;
        border-style: solid;
        border-width: 1px;
        border-color: red;
        margin-left: 0px;
        margin-right: 0px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .card {
        border-style: solid;
        border-width: 1px;
        border-color: red;

    }

    body {
        margin-left: 0;
        margin-right: 0;
    }
</style>

<body>
    <div class="container">
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
    </div>
</body>

</html>

我移开了身体的左右边缘，并在所有卡片和容器本身周围设置了边框。

我还在Chrome开发人员工具中检查了不同的查看端口大小，并且在不同大小下的间距看起来还不错。

如何在html中对齐卡片？

2 个答案: