0

最後のスパンが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みんな:)

4

3 に答える 3

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;}
于 2013-04-24T18:56:17.120 に答える
0

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% の幅を計算する際の境界線が含まれます。ただし、caniuse で現在のブラウザー サポートを確認してください。

たとえば IE7 で動作させるには、css 式を使用して動作をシミュレートすることができます。次のようにリンクできる IE7 のみのスタイルシートで使用します。

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7_fix.css" />
<![endif]-->
于 2013-04-24T19:00:42.907 に答える