如何在浮動div之間放置空格？

我有一個父div，它可以改變它的大小，這取決於可用空間。在那個div裏面，我有浮動div。現在，我想要在這些div之間有空格，但是沒有空格給父div（參見圖）。如何在浮動div之間放置空格？

enter image description here

有沒有辦法用CSS來做到這一點？

謝謝

2011-10-06 ghost23

我找到了解決辦法，至少在我的處境有所幫助，它可能不適合其它情況：

我給我所有的綠孩子的div一個完整的保證金：

margin: 10px;

而對於周圍的黃父DIV我設置了負邊距：

margin: -10px;

我也不得不刪除任何明確的寬度或高度設置爲黃父格，否則它沒有ñ工作。

這樣，絕對地說，子div是正確對齊的，儘管父黃色div顯然是關閉的，在我的情況下是OK的，因爲它不可見。

來源

2011-10-07 10:01:05 ghost23

這種方法只有一個缺點：如果您的父div與頁面的右側齊平（或在其10px內），則10px的負邊距將與窗口邊緣重疊，擴大頁面並導致水平滾動條。這對於響應式設計來說可能更具問題，您需要開始處理總寬度有時小於320像素的視口寬度。 – thomasrutter

注意：那說，我當然沒有找到更好的解決方案。 – thomasrutter

是的，你說得對。正如我所說，這當然不適用於所有情況。 – ghost23

添加margin到您的div風格

margin:0 10px 10px 0;

http://www.w3schools.com/css/css_margin.asp

來源

2011-10-06 15:51:07 Jeff

但在底部也留有邊距，意味着底部綠色div與黃色div底部邊界之間的空間。不要那樣。 – ghost23

對不起。我正在閱讀你的文字，沒有仔細檢查你的圖表。我不認爲有一個純粹的CSS解決方案 - 當然不是一個好的跨瀏覽器。我將使用JavaSCript來確定哪些div位於第二行，爲它們分配一個類並給這個類'margin-bottom：0'。我不認爲你會好得多。 – Jeff

這將爲所有div添加邊距底部，並在此處討論不需要的主要div創建空間。 – punit

是它不只是施加適當的類每格的情況？

例如：

.firstRowDiv { margin:0px 10px 10px 0px; } 
.secondRowDiv { margin:0px 10px 0px 0px; }

，如果你知道這取決於提前其中div來適用的類。

來源

2011-10-06 17:07:31 usefulcat

嗨，是的，好吧，正如我試圖說的，divs是浮動的，父div可以改變它的大小，所以我不知道，每個div都會在哪裏。 – ghost23

對不起，回答舊的文章，但你可以做到以下幾點：

假設你容器div有一類「黃色」。

.yellow div { 
    // Apply margin to every child in this container 
    margin: 10px; 
} 

.yellow div:first-child, .yellow div:nth-child(3n+1) { 
    // Remove the margin on the left side on the very first and then every fourth element (for example) 
    margin-left: 0; 
} 

.yellow div:last-child { 
    // Remove the right side margin on the last element 
    margin-right: 0; 
}

數3N + 1等於輸出每第四個元素，如果你知道有多少人會在一行中顯示顯然只工作，但應說明的例子。 More details regarding nth-child here。

備註：對於：第一個孩子在IE8及更早版本中工作時，必須聲明<!DOCTYPE>。

注2：所有主流瀏覽器都支持nth-child（）選擇器，IE8和更早版本除外。

來源

2013-08-08 14:37:37 Coreus

嗨，謝謝你的回答，但正如我在我的問題中所說的那樣，容器可以改變其大小，因此可能會有超過三個div的空間。 – ghost23

我很晚參加派對，但是......我有類似的情況出現，我發現padding-right（當然還有底部，頂部，左邊）。從我瞭解它的定義的方式來看，它將填充區域放在的內部div中，所以不需要在父級上添加負邊距，就像您對邊距所做的那樣。

padding-right: 10px;

這對我來說伎倆！

來源

2013-09-11 03:38:25 SolarBear

由於此填充位於div內，因此它將具有div的背景顏色。在這種情況下，綠色div的右邊緣將爲10px的綠色。例如，如果綠色div包含文本，它將確保在該10px中沒有文本 - 但它不會使該區域變爲黃色。因此在OP的情況下沒有用處。但是讓人們知道的很好。 – ToolmakerSteve

稍後回答。

如果你想使用這樣的網格，你應該看看Bootstrap，它相對容易安裝，並且它給你你正在尋找的東西，所有的東西都包裹在漂亮而簡單的html/css +中輕鬆地使網站響應。

來源

2016-03-15 11:15:05

舉個例子！只是「使用Bootstrap」根本沒有幫助我。其實我*是*使用Bootstrap並有這個問題。 –

如何在浮動div之間放置空格？

回答

相關問題