如何在html中对齐卡片？ [复制]答案

【问题标题】：How to align cards in html? [duplicate]如何在html中对齐卡片？ [复制]
【发布时间】：2019-04-06 10:31:35
【问题描述】：

我有一个包含一些卡片的容器，我希望每张卡片从容器的左边界开始并在右边界结束，如下面的代码。

<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 以表现出我想要的行为，但角卡不会触及边框。有什么帮助吗？？

编辑：这是我的期望和

我得到了什么

【问题讨论】：

您是指在小屏幕上查看时的空间吗？
@Dark_thunder 我已经在编辑http://jsfiddle.net/gaurav1330/q32oLat1/2/ 中尝试过您的代码，看看。为了验证我已经为每张卡片添加了边框。上面上传的代码可以正常工作。
这对我来说很好。如果您对间距有疑问，或许可以让我们知道您使用的屏幕分辨率会产生问题。
等等对不起各位，我不加flex-wrap:wrap，请立即查看问题
@Dark_thunder 正如管理员所说，指定您遇到问题的屏幕尺寸。您可以查看更新的网址link

标签： html css flexbox

【解决方案1】：

我不太确定我是否重现了您的问题，但这里有一个 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 开发者工具中检查了不同的视口尺寸，不同尺寸下的间距看起来不错。

【讨论】：

【解决方案2】：

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

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

为了避免不需要的空格，我删除了.card:first-child 的margin-left 和.card:last-child 的margin-right

您可以通过以下方式具体设置每行card内容的数量设置一个共同的宽度并清除margin 空间 nth-child.目前我为每行 5 个元素编写了此代码

.container {
  display: block;
  width: 100%;
}

.card {
  border: 1px solid black;
  float: left;
  margin: 1px;
  padding: 10px 3px;
  /*setting width for each and every card element as well as -10px for removing the margin width for 5 elements*/
  width: calc( 100% / 5 - 10px);
}


/*first element*/

.container .card:first-child {
  margin-left: 0;
}


/*last element of the first row*/

.container .card:nth-child(5n) {
  margin-right: 0;
}


/*first-element of the 2nd row*/

.container .card:nth-child(5n+1) {
  margin-left: 0;
}


/*last element*/

.container .card:last-child {
  margin-right: 0;
}

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

【讨论】：

第一张和第六张卡没有对齐，所以我没有使用margin。
让我知道你想要连续多少个元素@Dark_thunder
@Dark_thunder 查看编辑后的答案。我认为每行有 6 个元素，并且我在 css 上有明确的 cmets。
元素数量暂时未知，但现在如果我添加第 8 个元素，它应该低于第 2 个元素，第 6 个元素也应该触及它的父元素的边框。
@Dark_thunder 这很神秘，你可能无法说出元素的总数，但你必须能够说出要放置在一行中的元素的数量。现在检查答案。我仍然认为连续有 6 个元素。