跨度用剩的宽度

Question

我尝试以这种方式使用跨，一个div的最后一个跨度占据div的剩余宽度

<div class='data'> 
    <span class='one'>dddd:</span> 
    <span class='last'>ssss</span> 
</div> 

.data{width:100%;display:block;} 
span.one{width:30%; border:1px solid red;float: left;} 
span.last{width:33%; border:1px solid red;display:inline-block;} 

所以你可以在这里看到

http://jsfiddle.net/gTPjh/3/

它不占所有遗留下来的空间:)

有人可以提出一个解决方案，日Thnx家伙:)

Answer 1

显示为一个块填写空间：

.data{width:100%;display:block;border:1px solid red; overflow: hidden;} 
span.one{width:30%; border:1px solid red;float: left;} 
span.last{ border:1px solid green; display: block; overflow: hidden;} 

Answer 2

您还可以使用与CSS3 box-sizing: border-box;（Working fiddle.）一个更现代的方式。

.data{width:100%;display:block;border:1px solid red;} 
span {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
span.one{width:30%; border:1px solid red;float: left; } 
span.last{width:70%; border:1px solid red; display:inline-block;} 

这包括计算30％和70％宽度时的边框。 但看看目前的browser support at caniuse。

为了让它在IE7中工作，可以使用simulate the behaviour with css expressions。 使用它，您可以在链接这样的IE7仅样式表：

<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="ie7_fix.css" /> 
<![endif]--> 

Answer 3

使用显示：表和表单元格作为http://jsfiddle.net/gTPjh/33/表明它工作:-)（我爱显示：表;）

.data{ width:100%; display:table; border:1px solid red;} 
span.one{ width:30%; display:table-cell; border:1px solid red;} 
span.last{ width:70%; display:table-cell; border:1px solid red;}