如何使用css在行中設定三個具有相同寬度33.3%的專案？Flex或Grid（沒關系）

這是所有代碼示例->

https://codepen.io/mihailovic-aleksandar/pen/eYVREwE

我需要什么？首先我有一個保證金問題，負保證金。我需要 to 專案是全寬 33.3%

解決負邊距。

我希望每個專案都恰好是 33.3% 并且是全長的。目前對我來說是 32%，如果我將它設定為 33.3%，它是一個新行的捷徑。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32%;
  height: 75px;
  background: #f4f4f4;
  margin: 3px;
  border-radius: 10px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item"> 7</div>
</div>

uj5u.com熱心網友回復：

如果你想包括邊距（雖然你應該在邊距上包括一個間隙），你需要使用calc(33.33% - 6px)作為寬度

.container {
    display: flex;
    flex-wrap :wrap;
    height: 165px;
    width: 100%;
}

.item {
  background: red;
   display: flex;
  align-items: center;
  justify-content: center;
  width: calc(33.33% - 6px);
  height: 75px;
  background: #f4f4f4;
  margin: 3px;
  border-radius: 10px;
}

<div class="container">
  <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
   <div class="item"> 7</div>
</div>

uj5u.com熱心網友回復：

在使用3px. _ 您可以使用它們來精確地制作它們，但您必須移除靜態的 left 和 right 。marginwidth: 33%width: calc(100%/3)33.33%margin

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/3);
  margin: auto auto .5em auto;
  height: 75px;
  background: #f4f4f4;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

如果你想有間距，你可以使用width: calc(100%/3.1)withitem使margin: auto它們居中。.1占了一些間距。另一種選擇是使用width: calc(100%/3 - 6px);來說明margin: 3px;.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/3 - 6px); /* -6px accounts for margin: 3px; i.e., top   bottom at 3px = 6px */
  margin: 3px;
  height: 75px;
  background: #f4f4f4;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

uj5u.com熱心網友回復：

您可以為您的物品使用一個容器并給它們width:33.33%并為您的物品設定邊距。

這是一個基于您的筆的示例：

.container {
  display: flex;
  flex-wrap :wrap;
  height: 165px;
  width: 100%;
}
.item-container {
  display: flex;
  width: 33.33%;
  height: 75px;
}
.item{  
  width:100%;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 10px;
}

<div class="container">
  <div class="item-container">
    <div class="item">1</div>
  </div>
  <div class="item-container">
    <div class="item">2</div>
  </div>
  <div class="item-container">
    <div class="item">3</div>
  </div>
  <div class="item-container">
    <div class="item">4</div>
  </div>
  <div class="item-container">
    <div class="item">5</div>
  </div>
  <div class="item-container">
    <div class="item">6</div>
  </div>
  <div class="item-container">
    <div class="item">7</div>
  </div>
</div>

標籤：html css 弹性盒

上一篇：我可以給HTML元素提供兩個類屬性嗎？如果是這樣，如果我向他們兩個都撰寫代碼，這會影響我的頁面嗎？

下一篇：使閃屏重疊元素