顯示爲表格單元格

我在玩弄display屬性，試圖獲取它們的掛鉤。顯示爲表格單元格

我有一個問題是如何獲得表格單元格之間的間距。現在我有4個圖像相互裝箱。我想讓它們緊挨着左側，但是它們之間有間距。所以除了左邊以外的其他地方也是如此我嘗試使用border-spacing: 5px;，但在左側增加了間距。

我把一個版本放在jsfiddle中，但它的渲染與另一個問題。在jsfiddle中顯示行之間的空間。不知道爲什麼會發生這種情況，因爲它在大衣中正常工作。

http://jsfiddle.net/chapster11/RjGaX/

來源

2011-07-16 Chapsterj

您需要添加padding:5px 5px 5px 0;到#displayWrapper #grid .gridImage得到甚至填充。

這條規則說加padding5px到top，right和bottom和0 padding到left。

添加img {vertical-align:bottom;}修復底部的額外空間。

http://jsfiddle.net/jasongennaro/RjGaX/3/

來源

2011-07-16 04:13:58

通過添加填充到gridImage它會給我間距，但間距將在圖像邊框內。我希望間距超出邊界。 – Chapsterj

另外我怎麼不需要添加IMG {vertical-align：bottom;}當從其他地方查看，但jsfiddle – Chapsterj

@Chapsterj。不確定小提琴外面的「img」路線？關於間距：添加'border-spacing：5px;'到你的表格元素（'#displayWrapper＃grid'）。 http://jsfiddle.net/jasongennaro/RjGaX/5/不幸的是，這使得間距均勻。如果你想要在圖像之間進行間距，而不是在左側，你需要將'img's包裹在'div'中，並向三邊添加填充。 –

您需要設置border-collapse:separate;，使您的border-spacing實際上是兩個單元的邊界之間。

來源

2011-07-19 12:57:53

add display：block;到img

來源

2013-11-15 13:56:36

顯示爲表格單元格

回答

相關問題