編輯問(wèn)題，以包括預(yù)期行為、特定問(wèn)題或錯(cuò)誤以及重現(xiàn)問(wèn)題所需的最短代碼。這將有助于其他人回答問(wèn)題。

給定的形狀應(yīng)該能夠通過(guò)使用內(nèi)嵌塊元素和少量計(jì)算來(lái)實(shí)現(xiàn)。

.inline {
  width: 800px;
  margin: auto;
  padding: 20px;
  padding-right: 0;
  background-color: #eee;
}

.inline > div {
  background-color: #ddd;
  font-family: sans-serif;
  font-size: 24px;
  text-align: center;
  height: 60px;
  display: inline-grid;
  place-items: center;
  margin-right: 20px;
  margin-top: 20px;
}

.inline > .col--full {
  width: calc(100% - 20px);
  margin-top: 0;
}

.inline > .col--2 {
  width: calc((100% - 2 * 20px) / 2);
}

.inline > .col--3 {
  width: calc((100% - 3 * 20px) / 3);
}

.inline > .col--4 {
  width: calc((100% - 4 * 20px) / 4);
}

<div class="inline">
  <div class="col--full">Full Width</div>
  
  <div class="col--3">1/3</div>
  <div class="col--3">1/3</div>
  <div class="col--3">1/3</div>
  
  <div class="col--2">1/2</div>
  <div class="col--2">1/2</div>
  
  <div class="col--4">1/4</div>
  <div class="col--4">1/4</div>
  <div class="col--4">1/4</div>
  <div class="col--4">1/4</div>
</div>