16

私は CSS がとても苦手で、何か複雑なことを成し遂げる必要があります。

データを含むテーブルを取得し、次のような列を持っていますQty Assigned / Qty Requested。割り当ての割合を計算すると、10 のうち 5 が割り当てられると 50% になります。TDここで、% に一致する人に背景色を付けたいと思います。したがって、50% は赤の TD の半分になります。

使ってみましたがうまくいきbackground-color: red; background-size: <?php echo $BgPct; ?>%;ません。

誰にも解決策がありますか？何でも使えます。私もjQueryを持っています。CSS1/2/3 かどうかは気にしませんが、66% が 75% の背景画像にならないように正確である必要があります。

4

4 に答える 4

5

別の div 内に div を配置できます。両方の div を同じ高さにします。内側の div は背景色 (赤) になります。次に、divの幅を数％設定すると、それがどれだけ埋められるかがわかります。

これは、twitter ブートストラップがプログレス バーを実装する方法です。垂直方向の塗りつぶしバーが必要な場合は、高さを % に設定して幅を同じにすることができると思います。

以下は Twitter ブートストラップの例です。

http://cssdeck.com/labs/twitter-bootstrap-progress-bars

詳細タブをクリックしてソースコードを表示します。

基本的な実装例:

<div style="width:50%">
    <div style="width: 50%; background-color:red; text-align:center">Hello</div>
</div>
于 2012-07-31T19:20:20.900 に答える
4

コメントで示唆されているように、表のセルbackground-imageの適切な割合に引き伸ばされた単一のピクセルでうまくいきました。background-sizeこれは、最新のすべてのブラウザー (IE9+) で機能します。

これには、( div「色付きのバー」を含めるために追加の要素を使用するよりも) など、表のセルに適用する可能性のある他のスタイルから独立しているという利点がありますtext-align。セルのコンテンツとフレックスの背後に自然に表示されます。パーセンテージを使用している場合は、表のセルを埋めます。

CSS:

td.bargraph {
    background:transparent url(/img/dot-green.gif) 0 center no-repeat;
    text-align: center;
}

HTML:

<td class="bargraph" style="background-size:<?=$perc?>% 80%"><?=$perc?>%</td>

$perc計算されたパーセンテージはどこにありますか。

于 2014-06-08T18:50:40.820 に答える
0

divエフェクトを適用する各 s の内側に、赤く色付けされた を配置tdします。次に、jQuery を使用して 内の数値 (文字列) を取得し、tdそれを変数にします。これを使用して、 の幅を設定できますdiv。

于 2012-07-31T19:20:30.517 に答える