php - 如何将存储在PHP中的不同宽度应用于3个相同的DIV(使用相同的CSS)

我有一个具有CSS样式的图形。它的宽度是在WordPress中设置的，因此我需要使用php来应用它。

首先，我通过在HTML中添加一些内联CSS来应用宽度。即使一页上只有很少的图形，这也能很好地工作。但是，当我想增加响应度时，内联CSS会覆盖媒体查询并破坏响应度。因此，我决定通过将PHP变量直接按以下说明的方式应用于CSS来做到这一点：

http://css-tricks.com/css-variables-with-php/

问题是发生以下情况时：

我有规则：

.graph {
    width: <?php echo $graph-width; ?>;
       }

我在使用此类的一页上有3张图。每个图都有在WordPress管理面板中指定的不同宽度。

如何将存储在PHP中的那些不同宽度应用于页面上的所有3个图形。

请注意，我永远不知道一页上会有多少个图形。

最佳答案

我现在没有时间进行测试，但是这可能有效。用另一个包含递增数字的类创建div，即。 container-1，container-2，container-n。

然后使用jQuery，您可以执行以下操作：

var i = 1;
function widthAdder() {
    if(i % 2 === 0) { //this is every second element
         $('.container-' + i).css(width: "100px"); //here you set the width
         i++;
    } else if (i % 3 === 0) { // this is every third
         $('.container-' + i).css(width: "150px"); //here you set the width
         i++;
    } else { //this is every first
         $('.container-' + i).css(width: "200px"); //here you set the width
         i++;
    }
}

widthAdder();

希望这可以帮助。