Question

我目前在我的wordpress子主题中有这个代码。它允许我通过围绕div中的内容来自定义单个帖子的宽度。尽管在页面宽度上有这么多种类可能不是最佳做法，但这是我希望我的网站拥有的功能。

然而，我用来完成这项任务的css类列表越来越失控。如何在保持最大宽度灵活性的同时减少代码长度？

具体来说，有没有办法分配一个将完成的条目：

div.max($width) {

  max-width: ($width)px;

  margin: 0 auto;

}

其中$ width =选择的最大宽度？

    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;

    }

Answer 1

为了回答您的具体问题，CSS没有内置的方法来完成您正在寻找的动态类生成。但是，以这种方式使用CSS类并没有多大好处。您也可以直接在div的style属性上指定max-width，如下所示：

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

但是，您可以在CSS中使用通用container类来设置边距，并指定默认宽度（最常用），如果需要，只需使用{覆盖max-width值{1}}属性。例如：

style

如何为max-width编写更高效的CSS

1 个答案: