Как сделать цвет div перед другим?

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; ?>, что путь не будет работать, потому что эхо выводит содержимое без дальнейшего анализа 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 для всех (кроме ширины, которая является динамической). Использование тега стиля не рекомендуется, так как это затрудняет сохранение и переработку позже в жизненном цикле продукта. Он также раздувает выход.
• Возможно, вы захотите использовать какой-то механизм шаблонов или, по крайней мере, «здесь документ» -syntax, для лучшей ремонтопригодности разметки.

Пример:

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

Пример с отдельной CSS:

УС:

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

РНР:

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>';