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

使用display：table和table-cell为http://jsfiddle.net/gTPjh/33/显示它有效:-)（我喜欢显示：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;}

在div对齐问题中跨越剩余宽度

3 个答案: