gpt4 book ai didi

html - 三列布局设计的第 n 个子属性?

转载 作者:太空宇宙 更新时间:2023-11-04 13:34:35 25 4
gpt4 key购买 nike

如何将第 nth-child 属性实现到帖子循环显示的三列布局。

现在我想为

指定第n个子属性
1st,4th,7th,10th,13th child respectively and so
and
2nd,5th,8th,11th,14th child respectively and so on
and
3rd,6th,9th,12th ,15th child respectively and so on

针对不同的 CSS

最佳答案

你可以像这样使用nth-child。我在演示中将其全部用作 div。

HTML:

<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
<div>10</div><div>11</div><div>12</div>
<div>13</div><div>14</div><div>15</div>

CSS:

div {width:33%; background:grey; height:50px; float:left;}
div:nth-child(3n-1){background:green;}
div:nth-child(3n){background:blue;}

DEMO

关于html - 三列布局设计的第 n 个子属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23134402/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com