內聯表元素之間不需要的間距

我想在動態寬度div內製作動態寬度列。一切似乎都工作得很好，但如果我想使列寬度的總和達到100％，即使仍有空間，第三列也會跳下去。我無法擺脫每列之後的間距。也許你們中的一些人可能會知道爲什麼？這是我的小提琴！ http://jsfiddle.net/vMe5L/ 我的代碼：提前內聯表元素之間不需要的間距

<style> 
.content { width: 300px; height: 200px; background-color: gray; } 
.left { width: 20%; display: inline-table; height: 100%; background-color: red; } 
.middle { width: 30%; display: inline-table; height: 100%; background-color: blue; } 
.right { width: 47%; display: inline-table; height: 100%; background-color: yellow; } 
</style> 

<div class="content"> 
    <div class="left"></div> 
    <div class="middle"></div> 
    <div class="right"></div> 
</div>

謝謝，你們是驚人的。

來源

2014-01-20 Kristine

作爲關於「爲什麼」，標籤外面的文字也算。 –

Float：right使它停留在容器中 –

在'table-cell'上使用'inline-table'的任何特定原因？ – Abhitalks

要麼浮動元素，要麼刪除兩者之間的空白。在內聯元素（其中包括將它們樣式設置爲display: inline-table或inline-block）時，也會顯示空白，即使它被摺疊爲單個空間也是如此。所以：

<div class="content"><div class="left"></div><div class="middle"></div><div class="right"></div></div>

工作正常。

來源

2014-01-20 12:42:24

謝謝！我不知道！完美的作品！ – Kristine

更好使用table和table-cell顯示。

演示：http://jsfiddle.net/abhitalks/vMe5L/5/

CSS：

div { box-sizing: border-box; } 
.content { display: table; width: 300px; height: 200px; background-color: gray; } 
.left { width: 20%; display: table-cell; height: 100%; background-color: red; } 
.middle { width: 30%; display: table-cell; height: 100%; background-color: blue; } 
.right { width: 50%; display: table-cell; height: 100%; background-color: yellow; }

更新：

如果你要堅持inline-table，則擺脫了白色空間。將引進的意見，最好的辦法：

<div class="content"> 
    <div class="left"></div><!-- 
    --><div class="middle"></div><!-- 
    --><div class="right"></div> 
</div>

來源

2014-01-20 12:45:03 Abhitalks

嘗試了這一點：

Fiddle

所做的更改，添加CSS display:table到外部類的內容，內部類變更爲display:table-cell;

來源

2014-01-20 12:56:05 Sara

內聯表元素之間不需要的間距

回答

相關問題