如何使用第n個子屬性連續顯示3個div？

我對使用CSS nth child屬性在主容器中分配3個div有疑問div。任何人都可以向我建議公式嗎？如何使用第n個子屬性連續顯示3個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; 
}

來源

2015-10-06 Syam Sree

可以連續顯示它們沒有'第n-child'了。這裏的用例是什麼？ –

你能給我舉個例子嗎？ –

我不確定你在問什麼。你想要選擇第3個元素還是連續顯示3個div。您需要向我們展示您的預期輸出以幫助我們。 –

由於您使用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>

來源

2015-10-06 12:17:53

謝謝我的朋友。它適用於我.... :-) –

沒問題，Syam :)下次請確保您在問題中添加您的代碼，以避免來自社區的任何反對票。 –

對不起，我的朋友。下次我將添加代碼與問題。;-) –

如何使用第n個子屬性連續顯示3個div？

回答

相關問題