如何將存儲在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）

回答

相關問題