Question

我想知道以下代码有什么问题;我想让内部div颜色显示为外部div颜色的一部分。我使用这个百分比投票栏：

echo '<div style="width:130px; height:20px; background-color:#ecf2f9; overflow:hidden;">';

    echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; position:relative; z-index:3"></div>';

    echo '</div>';

或者是否会有其他解决方案来获得我需要的结果。在此先感谢您的帮助

Answer 1

在你的情况下它相对简单。只需设置内部div的高度就可以了;）

DIV没有默认高度。这就是问题所在。

示例：

echo '<div style="width:130px; background-color:#ecf2f9;">'; echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; height:20px;"></div>'; echo '</div>';

您可以在此处看到栏的简单HTML示例： https://jsfiddle.net/eaz1vbex/

除此之外，使用<?php print $percent1; ?>这种方式不起作用，因为echo输出内容而无需PHP解释器进一步解析。如果要保留上述代码样式，则应在继续阅读之前将其更改为以下内容：

echo '<div style="width:130px; background-color:#ecf2f9;">'; echo '<div style="width:' . $percent1 . '%; background-color:#ff33cc; height:20px;"></div>'; echo '</div>';

可替换地：

echo "<div style='width:130px; background-color:#ecf2f9;'>"; echo "<div style='width:$percent1%; background-color:#ff33cc; height:20px;'></div>"; echo "</div>";

请阅读本文以便更好地理解： http://php.net/manual/en/function.echo.php

提示：

您应该为所有样式属性使用CSS（宽度除外，它是动态的）。建议不要使用样式标记，因为这会使产品生命周期中的维护和重新设计变得困难。它也会增加产量。

您可能希望使用某种模板引擎或至少使用“here document”-syntax，以便更好地维护标记。

示例：

echo <<<END <div style="width:130px; background-color:#ecf2f9;"> <div style="width:$percent1%; background-color:#ff33cc; height:20px;"></div> </div> END;

单独CSS的示例：

CSS：

.progressBar { width:130px; background-color: #ecf2f9; } .progressBar .progress { background-color:#FF33cc; height: 20px; }

PHP：

echo <<<END <div class="progressBar"> <div style="width:$percent1%;" class="progress"></div> </div> END;

请参阅：https://jsfiddle.net/fchp5aqa/

Answer 2

它的工作：我设置了height : 20px而您的$percent1没有打印!!所以我改变它并修复它。我认为这足以理解我做了什么!!

    echo '<div style="width:130px; height:20px; background-color:red;   overflow:hidden;">';

echo '<div style="width:'.$percent1.'%; background-color:blue; position:relative; z-index:3; height:20px;"></div>';

echo '</div>';

如何让div颜色出现在另一个面前？

2 个答案: