Question

我想在动态宽度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>

先谢谢，你们真是太棒了。

Answer 1

浮动元素，或删除其间的空格。在内联元素（包括将它们设置为display: inline-table或inline-block）上，即使将其折叠到单个空间，也会显示空白。所以：

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

工作正常。

Answer 2

最好使用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>

Answer 3

试试这个：

Fiddle

所做的改变，将css display:table添加到外部类内容，内部类更改为display:table-cell;

内联表元素之间的不需要的间距

3 个答案: