僅在元素之間的CSS固定大小的邊距

這不斷出現在某些項目上，我想看看是否有人可以有更好的解決方案。僅在元素之間的CSS固定大小的邊距

基本上，我試圖有一組div元素，其中所有的元素之間都有相等的間距，但是沒有。 下面的代碼片段是我正在尋找的一個例子，我的希望是有人可能有一個更清潔的解決方案。

我在這裏的問題是，如果任何人有更好的解決方案，可能會使用較少的CSS或更少的HTML元素。重要的事情來維持：

本地化兼容 - 因爲我們沒有使用左邊距或右邊有沒有在RTL任何奇怪的本地化問題
路線 - 它不應該大小到整個窗口，如果它不需要但它應該包裝，如果需要的話。（見例子）
間距 - 應該是一個固定的空間量元素

之間。如果您有任何想法，我很想聽聽他們！

 body { 
 
      background-color: black; 
 
      padding: 30px; 
 
     } 
 
     .inner { 
 
      overflow: hidden; 
 
      margin: 20px 0px; 
 
     } 
 
     .innerMargin { 
 
      background-color: white; 
 
      display: flex; 
 
      flex-direction: row; 
 
      flex-wrap: wrap; 
 
      margin: -10px; 
 
     } 
 
     .innerMargin > div { 
 
      flex: 0 0 20px; 
 

 
      background-color: red; 
 
      margin: 10px; 
 
      height: 20px; 
 
      width: 20px; 
 
     } 
 
     .fixedWidth { 
 
      width: 180px; 
 
     }

<div class="inner"> 
 
     <div class="innerMargin"> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
     </div> 
 
    </div> 
 
    <div class="inner fixedWidth"> 
 
     <div class="innerMargin"> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
     </div> 
 
    </div>

來源

2016-09-14 k2snowman69

填充或保證金？您的標題顯示爲「填充」，但我在其他地方看到了邊距 –

我不太確定您的目標是什麼，但可能會在內部元素上使用'margin：20px'，在外部使用'margin：-20px'最左邊和最右邊的物品似乎擁抱雙方。 – chris22smith

@TheOneandOnlyChemistryBlob更正了標題中的填充 – k2snowman69

我認爲應該指出的是，這對CSS Grid來說是微不足道的。

body { 
 
    background-color: #000; 
 
} 
 

 
.container { 
 
    display: grid; 
 
    grid-template: 20px/repeat(auto-fit, 20px); 
 
    grid-gap: 20px; 
 
    background-color: #FFF; 
 
    margin: 20px; 
 
} 
 

 
.container div { 
 
    background-color: red; 
 
} 
 

 
.fixed-width { 
 
    width: 180px; 
 
} 
 

 
.container > div { 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
</div> 
 
<div class="container fixed-width"> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
</div>

CodePen here

來源

2017-12-11 18:47:59 skube

這很搞笑，我剛剛添加這個確切的評論！請注意，我是否需要進行一些編輯來清理它，同時添加https://caniuse.com/#feat=css-grid的鏈接，因爲它目前在所有瀏覽器中都不支持？ – k2snowman69

但是，把這個建議的答案作爲，將來它會是:-) – k2snowman69

好的！它不會來得太早;）（隨意編輯，因爲你認爲合適） – skube

如果你知道你將總是有在fixedwidth盒5盒，你可以這樣做：

HTML（超薄）

.container 
    - 5.times do 
    .box 

.container.container--thinner 
    - 15.times do 
    .box

CSS（SCSS）

$width : 36; 
body {background-color: #000;} 
.container { 
    display:flex; 
    flex-wrap: wrap; 
    background-color: white; 
    margin-bottom: 2em; 
    width: $width + em; 

    .box { 
    width: 2em; 
    height: 2em; 
    margin-right: 2em; 
    background-color: red; 
    } 

    &--thinner { 
    justify-content: space-between; 
    width: $width/2 + em; 

    .box { 
     margin-bottom: 2em; 
     &:nth-of-type(5n) { 
     margin-right: 0; 
     } 
    } 
    } 
}

這裏有一個Codepen

來源

2017-07-02 15:33:25 skube

確實如此，但我認爲這個解決方案更糟糕的原因是它只能以不同的時間間隔將HTML和CSS綁定在一起。我提供的解決方案允許HTML是任何想要的，並且所有的實際佈局都是通過CSS完成的，保持圖層的分離。 – k2snowman69

貌似答案是不是目前...這似乎是這個問題的最佳解決方案。感謝大家！

來源

2017-07-04 22:41:51 k2snowman69

僅在元素之間的CSS固定大小的邊距

回答

相關問題