如何将存储在PHP中的不同宽度应用于3个相同的DIV（使用相同的CSS）

我有一个具有一些CSS样式的图。它的宽度是在WordPress中设置的，所以我需要使用PHP来应用它。如何将存储在PHP中的不同宽度应用于3个相同的DIV（使用相同的CSS）

起初，我通过在HTML中添加一些内联CSS来应用宽度。即使在一个页面上显示少量图表，这也可以很好地工作但是当我想增加responsivness它发生内联CSS覆盖mediaquries和打破responsivness。所以，我决定，我会在它这里所描述的方式直接将PHP变量CSS做到这一点：

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

的问题，当以下情况发生时：

我有规则：

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

我在使用这个类的一个页面上有3个图表。每个图形在WordPress管理面板中都有不同的宽度。

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

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

来源

2013-08-28 HoGo

让div的class或id有任何形式的独创性来区分它们吗？内容是否有任何形式的标识？ – Vector

你可以在html标签中嵌入样式。例如。

....

– bumperbox

@Vector没有任何ID的DIV是相同的。我可以考虑添加ID，但它会如何帮助？ – HoGo

我没有时间来测试这个，但这里的方法可能有效。让你的div创建另一个包含递增数字的类，即。容器-1，容器-2，容器-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();

希望这有助于。

来源

2013-08-29 16:44:10

谢谢，我用JS以类似的方式做了它。我认为没有别的办法。 – HoGo

如何将存储在PHP中的不同宽度应用于3个相同的DIV（使用相同的CSS）

回答

相关问题