CSS div设计nth-child

Question

我有一个网站设计。

我附上了它的样子。在框中将有来自MySQL数据库的数据。

我的问题是，是否可以只用一个查询来制作它？

我可以通过对前2个框进行限制2的查询，然后使用第3个和第4个框进行限制，对其余框进行第3次查询。

但我认为有可能用CSS制作第一个和第二个盒子有一个设计，第三个和第四个盒子有另一个设计，其余的则有另一种设计。所以它会像div一样自动生成，但取决于div的数量，然后应用其他设计。

Answer 1

这是一个例子。您可以尝试此代码。它经过全面测试。我希望它会对你有所帮助。

<强> HTML：

<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
<div>test5</div>
<div>test6</div>
<div>test7</div>
<div>test8</div>
<div>test9</div>
<div>test10</div>
<div>test11</div>
<div>test12</div>

<强> CSS：

div{
    width: 25%;
    float:left;
    border:1px solid #ccc;
    box-sizing: border-box;
    text-align:center;
}
div:nth-child(1), div:nth-child(2){
    width: 100%;
}
div:nth-child(3), div:nth-child(4){
    width: 50%;
}

的演示：

Answer 2

您编写的任何css规则都必须以代数方式表达。

an + b-1

要明确的是，除非你使用JS，否则没有逻辑从HTML / DOM传递到CSS。

但是，你可以使用：nth-​​child（）和：nth-​​last-child（）来协调一致。

MDN :nth-Child refrence

听起来你正在寻找的东西就像：

div{
    width: 25%
}
div:nth-of-type(1), div:nth-of-type(2){
    width: 100%;
}
div:nth-of-type(3), div:nth-of-type(4){
    width: 50%;
}