2016-04-08 102 views
1

一直在使用Google搜索並找到了一些解決方案,但沒有一個適用於我嘗試做的工作。基本上我需要平均分配4個div,即25% - 保證金範圍寬。棘手的部分是最後得到最後沒有空間。試過:等距元素是一個百分比,帶有填充/邊距

.container { 
    display: flex; 
    justify-content: space-between; 
} 

.child { 
    width: 22%; 
} 

但它留下了一個空間在最後。看起來很簡單,但我嘗試了多種不同的方式,沒有一個能正常工作。棘手的部分似乎是百分比寬度,並獲得最後一個元素不在右側有空格。

enter image description here

+1

任何演示?使用當前的代碼[jsfiddle](https://jsfiddle.net/v2d9raak/),除了默認的body邊距之外,它不會在邊上留下任何空間。 – Stickers

+0

您可以使用https://getbootstrap.com/examples/grid/來構建網格系統 –

+2

我不確定您在尋找什麼,因爲您嘗試的內容與圖像匹配,並且是我認爲您想要的。 [https://jsfiddle.net/r5zLyzds/](https://jsfiddle.net/r5zLyzds/) –

回答

0

@馬克-J是正確的,Drupal的被添加clearfix這是導致在年底額外的空間。這個作品:

.container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

.child { 
    width: 22%; 
}