如何使用第n个子属性连续显示3个div？

Question

我对使用CSS nth child属性在主容器中分配3个div有疑问div。任何人都可以向我建议公式吗？

.containerbox { 
    display: flex; 
} 
.pricing-container:nth-child(2n) { 
    width: 300px; 
    text-align: center; 
    font-family: 'Open Sans Condensed', sans-serif; 
    margin-right: 60px; 
    margin-left: 75px; 
    margin-bottom: 50px; 
    padding-left: -100px; 
} 

Answer 1

由于您使用Flexbox的，您需要在父容器上使用flex-wrap: wrap。在子项目上设置width: 30%，以便它们在第三项后包装。

没有必要在你的情况，30％的宽度使用nth-child用于补偿margin: 10px 1%

.containerbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.pricing-container { 
 
    width: 30%; 
 
    background: gray; 
 
    color: white; 
 
    text-align: center; 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    margin: 10px 1%; 
 
}

<div class="containerbox"> 
 
    <div class="pricing-container">1</div> 
 
    <div class="pricing-container">2</div> 
 
    <div class="pricing-container">3</div> 
 
    <div class="pricing-container">4</div> 
 
    <div class="pricing-container">5</div> 
 
    <div class="pricing-container">6</div> 
 
    <div class="pricing-container">7</div> 
 
    <div class="pricing-container">8</div> 
 
    <div class="pricing-container">9</div> 
 
</div>