行使用％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，如果20px是他们之间所需的margin，那么您可以＃39; d需要使用一些calc()，尤其是如果你想要第一个和最后一个触及父母边缘：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;