同樣間隔的div同一個空間 - CSS

我有三個div的固定寬度：400像素的寬度爲一個容器內：100％同樣間隔的div同一個空間 - CSS

所以我們可以說，我們是在一個1920像素的屏幕。

其餘的空間是1920 - （400 * 3）= 720.所以我想這個可用空間除以4並均勻分配它。所以第一個div必須在左邊180px，第一個div和第二個div之間的空間爲180px，第二個和第三個div之間的空間爲180px，第三個div與屏幕末端之間的空間爲再次180px。

divs和屏幕之間的空格應該根據屏幕大小而改變。

是否有可能與CSS做到這一點？

樣品：

enter image description here

來源

2014-03-27 Laxmana

顯示：Flex是爲這個:)製作。集裝箱使用：

display:flex; 
justify-content:space-around;

兒童，只需設置一個寬度％以上的靜態值。

有一個文字對齊工作：對齊和顯示：內聯塊;如果你需要

測試假點：這裏http://codepen.io/gc-nomade/pen/qcFBt/padding inside

的text-align版本：http://codepen.io/gc-nomade/pen/piCtm/

來源

2014-03-27 19:25:22

使用@GCyrillus的解決方案確實會導致一個問題，如果你想在400像素寬的元素，以保持它們的寬度：當屏幕尺寸太小時，它們會縮小。爲了確保它們總是寬度爲400px（並且在屏幕太窄時提示滾動條），使用'min-width：400px'。看[這個小提琴]（http://jsfiddle.net/fDjZU/15/） – Marcatectura

你需要添加一些填充來吞噬中間的空隙，在這裏檢查它http://codepen.io/gc-nomade/pen/ qcFBt/ –

非常感謝！據我所知，Flex不支持IE9。我不在乎IE9以下。有沒有其他的方式，或者我只能用js來做它？ – Laxmana

同樣間隔的div同一個空間 - CSS

回答

相關問題