我怎樣才能爲最大寬度編寫更高效的CSS

我目前在我的wordpress子主題中有這個代碼。它允許我通過圍繞div中的內容來自定義各個帖子的寬度。雖然在頁面寬度中可能不是最佳實踐，但這是我希望我的網站具有的功能。我怎樣才能爲最大寬度編寫更高效的CSS

但是，我用來完成這項任務的css類的列表越來越失控。如何在保持最大寬度靈活性的同時減少代碼長度？

具體而言，是否有分配，將完成的條目的方式：

div.max($width) { 

    max-width: ($width)px; 

    margin: 0 auto; 

}

其中$寬度=最大寬度選擇？

div.max500 { 
     max-width:500px; 
     margin: 0 auto; 
    } 

    div.max600 { 
     max-width:600px; 
     margin: 0 auto; 
    } 

    div.max650 { 
     max-width:650px; 
     margin: 0 auto; 
    } 

    div.max700 { 
     max-width:700px; 
     margin: 0 auto; 

    } 

    div.max750 { 
     max-width:750px; 
     margin: 0 auto; 
    } 

    div.max800 { 
     max-width:800px; 
     margin: 0 auto; 

    }  

    div.max900 { 
     max-width:900px; 
     margin: 0 auto; 

    }

來源

2015-12-02 Gravity

要回答您的具體問題，CSS沒有內置的方法來完成您正在尋找的那種動態類生成。雖然這樣使用CSS類沒有多大好處。你還不如直接指定最大寬度上的div style屬性，像這樣：

<div style="margin: 0 auto; max-width: 500px;"> Content </div>

但是，你可以在你的CSS，這臺邊緣使用共同的container類，並指定默認寬度（最常用），如果需要，只需使用style屬性覆蓋max-width值。例如：

<html> 
    <head> 
    <style> 
     .container { 
     max-width: 500px; 
     margin: 0 auto; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container" style="max-width: 800px;"> 
     Content 
    </div> 
    </body> 
</html>

來源

2015-12-02 07:35:27 cjhveal

我怎樣才能爲最大寬度編寫更高效的CSS

回答

相關問題