html - 跨度与剩余宽度的 div 对齐问题

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

使用 display: table 和 table-cell 作为http://jsfiddle.net/gTPjh/33/显示它有效:-) （我喜欢 display:table;）

.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;}

Answer 3

您还可以使用更现代的方式与 css3 box-sizing: border-box;（工作小提琴。）。

.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% 宽度时的边界。但是请查看caniuse上当前的浏览器支持。

例如，为了让它在 IE7 中工作，可以使用 css 表达式来模拟行为。在仅限 IE7 的样式表中使用它，您可以像这样链接：

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