for 루프에서 CSS 요소의 너비를 동적으로 증가 시키십시오.

Question

EDIT : 아래에서 다른 답변을 찾았습니다.

PHP를 그래프로 표시하고 열을 만들 수 있지만 .inner 클래스의 CSS 너비에 맞게 백분율을 늘리려고하면 배열의 각 요소에 대해 증가하지 않습니다. 배열의 각 요소의 너비를 어떻게 늘릴 수 있습니까?

$percentage = array(0.2,0.4,0.5,0.6,0.7,0.8); 

for($i=0;$i<6;$i++){ 

echo "<div class='outter'> 
<div class='inner'>"; echo $percentage[$i]; echo " 
</div> 
</div>"; 

echo "<style type='text/css'>"; 
echo ".outter{height:25px;width:500%;border-right:solid 1px #000;}"; 
echo ".inner{height:25px;width:";echo $percentage[i]; echo "%;border-right:solid 1px #000;background-color:#02abff;}"; 
echo "</style>"; 

} 

나는 HTML과 CSS로 할 수 있지만 PHP로하고 싶습니다. 감사.

Answer 1

눈치 채 셨으니 실제 값은 0.X%이고 정확한 너비는 아닙니다. 이 값에 10 (또는 100)을 곱하면 2 % (또는 20 %)가됩니다.

$percentage = array(0.2,0.4,0.5,0.6,0.7,0.8); 

foreach ($percentage as $key => $val) { 
    echo "<div class='outter'> 
     <div class='inner'>"; 
    echo $val; 
    echo "</div> 
     </div>"; 

    echo "<style type='text/css'>"; 
    echo ".outter{height:25px;width:500%;border-right:solid 1px #000;}"; 
    echo ".inner{height:25px;width:"; 
    echo $val * 10; 
    echo "%;border-right:solid 1px #000;background-color:#02abff;}"; 
    echo "</style>"; 
} 

은 또한 당신이 더 의미 working with arrays하게 foreach 루프, 거기 있던 for 루프를 변경했습니다.

Answer 2

알았습니다. html 태그 안에 스타일을 넣어야했습니다.

foreach($percentage as $percent){ 

echo "<div class='outter' style='height:25px;width:500%;border-right:solid 1px #000;'> 
<div class='inner' style='height:25px;width:"; echo $percent; echo "%;border-right:solid 1px #000;background-color:#02abff;'>"; echo $percent; echo " 
</div> 
</div>"; 
}