css - 使用 % width 向上排列

Question

我有一个页面，其中一行有 4 张卡片，每张卡片的宽度为:25%。在它下面有一行 3 张牌，我想将它们与上面一行的前 3 张牌对齐。这些卡片也有一个边距，这意味着当它将卡片的宽度除以 25% 时，3 张卡片更大。知道如何解决这个问题吗？

.section-wrapper {display: flex}
.sessions-card, .earnings-card {flex:0 0 25%; margin: 0 10px; border: 2px solid black; height: 200px}

.session-wrapper:first-child {margin-left: -10px}
.session-wrapper:last-child {margin-right: -10px}

<h1>Sessions</h1>
<div class="section-wrapper">
  <div class="sessions-card approved"></div>
  <div class="sessions-card completed"></div>
  <div class="sessions-card pending"></div>
  <div class="sessions-card cancelled"></div>
</div>

<h1>Earnings</h1>
<div class="section-wrapper">
  <div class="earnings-card"></div>
  <div class="earnings-card"></div>
  <div class="earnings-card"></div>
</div>

Answer 1

代替 width，您可以使用 flex property 并且如果 20px 是所需的margin 在它们之间，你需要使用一些 calc()，尤其是。如果你想让第一个和最后一个接触到parents边缘:

.section-wrapper {display: flex; background: lightblue}

/* can also do it with the "justify-content: space-between;" and "margin-right: auto" set on the last ".earnings-card" */

.sessions-card, .earnings-card {
  /*width: 25%;*/
  flex: 0 0 calc(25% - 15px); /* -15px because of the -20px left & right margin devided by 4 = 5px; 20px - 5px = 15px */
  margin: 0 10px;
  border: 2px solid black;
  height: 200px;
  box-sizing: border-box;
}

.sessions-card:first-child,
.earnings-card:first-child {
  margin-left: 0;
}

.sessions-card:last-child,
.earnings-card:last-child {
  margin-right: 0;
}

<h1>Sessions</h1>
<div class="section-wrapper">
  <div class="sessions-card approved"></div>
  <div class="sessions-card completed"></div>
  <div class="sessions-card pending"></div>
  <div class="sessions-card cancelled"></div>
</div>

<h1>Earnings</h1>
<div class="section-wrapper">
  <div class="earnings-card"></div>
  <div class="earnings-card"></div>
  <div class="earnings-card"></div>
</div>