创建静态栏的最佳方法是什么（如youtube红绿栏）？

Question

如何创建静态栏？

$vote1 = "890";
$vote2 = "1656";

Answer 1

你可以在没有图像的情况下创建它，这是一个小例子，但你可以明显改变高度以匹配更细线条。

未经测试但应该帮助您到达目的地。

<?php

$vote1 = "890";
$vote2 = "1656";
$total = $vote1 + $vote2;
$vote1 = round($vote1 / ($total) * 100);
$vote2 = round($vote2 / ($total) * 100);

?>

<table>
<tr>
<td style="background-color:#360; height:2px;" width="<?php echo $vote1;?>px">&nbsp;</td>
<td style="background-color:#900; height:2px;" width="<?php echo $vote2;?>px">&nbsp;</td>
</tr>
</table>

Answer 2

您可以使用CSS中的百分比

<?php
$vote1 = 890;
$vote2 = 1656;
$sum   = $vote1 + $vote2;

$likes    = $vote1 / $sum * 100;
$dislikes = $vote2 / $sum * 100;
?>

<div style="width: 200px;">
  <div style="background: #060; width: <?php echo $likes ?>%; float: left;">&nbsp;</div>
  <div style="background: #C00;   width: <?php echo $dislikes ?>%; float: left;">&nbsp;</div>
</div>

这与YouTube完全相同

Answer 3

你可以使用一些宽度的“div”元素 - 比方说100。 然后你可以在里面添加两个div - 一个带绿色背景，一个带红色。 首先是宽度 - （$ vote1 / $ allVotes）* 100和第二个 - （$ vote2 / $ allVotes）* 100，其中$ allVotes将是所有投票的数量。