如何根據僅在加載樣式表后才能找到的元素數量更改CSS屬性？

Question

當有兩個div時，我需要在第一個div之前留一個空白邊距。 但是，當有3個div時，不應有空白邊距。

div的數量是基於服務器端數據的動態內容，因此可以動態地有2或3個div。

需要：

太空Div1 Div2

Div1 Div2 Div3

如何在簡單的CSS中實現？

Answer 1

您可以嘗試使用容器和flex代替邊距

 .caja{ width:100%; display:flex; flex-wrap:wrap; } .caja span{ flex:1; } 

 <div class="caja"> <span>span1</span> <span>span2</span> </div> <div class="caja"> <span>span1</span> <span>span2</span> <span>span3</span> </div> 

另一個選項是javascript，您可以對元素進行計數，如果數量超過2，則添加所需的邊距，或者在情況下將其刪除：

 $(".caja").each(function(){ var caja = $(this).find("span").length; if(caja>2){ $(this).find('span').css('margin','0'); } }); 

 .caja span{ margin: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="caja"> <span>span 1</span> <span>span 2</span> </div> <div class="caja"> <span>span 1</span> <span>span 2</span> <span>span 3</span> </div> 

希望它能工作。

Answer 2

編輯：請參閱底部的示例，以獲取與容器內任意數量的元素兼容的解決方案，該解決方案僅使用float和margin它們居中。

僅使用nth-last-of-type()和nth-of-type()來使用css是很有可能的-至少如果元素的最大數量為3（可能可以對css進行更多調整）。 檢查下面的例子。

說明：如果只有2個元素，則nth-last-of-type(2)以第一個元素為目標，但是如果有3個元素，則以第二個為目標。 nth-of-type(n + 2)定位第二個和第二個之前的所有元素，如果元素多於2個，則取消上一個樣式。 在此示例中， n +不是必需的，但是可以包含更多的元素。

<div class="container">
<div></div>
<div></div>
</div>

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

的CSS

.container div{
float:left;
width:30%;
height:50px;
background:red;
border:1px solid;
}
.container div:nth-last-of-type(2){
margin-left:16%;
background:blue;
}
.container div:nth-of-type(n + 2){
margin:0;
background:green;
}

示例： https ： //jsfiddle.net/ufzwkzvu/5/

注意，只是將顏色應用於區分元素。

---

編輯：示例處理容器內任意數量的元素。

 .floater { float: left; width: 33.33%; height: 50px; background: red; border: 1px solid; box-sizing: border-box; } /* The relevant css is inbetween comment below and the next */ /* Relevant css start */ .floater:nth-last-of-type(2) { margin-left: 16.66%; background: blue; } .floater:nth-last-of-type(1) { margin-left: 33.33%; background: blue; } .floater:nth-of-type(3n - 1) { margin: 0; background: green; } .floater:nth-of-type(3n) { margin: 0; background: green; } /* Relevant css end */ span.clearfix { clear: left; display:block; } .spacer{ padding:20px 0; } .container{ padding:20px 0; clear:both; } .container:nth-of-type(2n){ background:#e6e6e6; } 

 <div class="spacer">1 element</div> <div class="container"> <div class="floater"></div> <span class="clearfix"></span> </div> <div class="spacer">2 elements</div> <div class="container"> <div class="floater"></div> <div class="floater"></div> <span class="clearfix"></span> </div> <div class="spacer">3 elements</div> <div class="container"> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <span class="clearfix"></span> </div> <div class="spacer">4 elements</div> <div class="container"> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <span class="clearfix"></span> </div> <div class="spacer">5 elements</div> <div class="container"> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <span class="clearfix"></span> </div> <div class="spacer">9 elements</div> <div class="container"> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <span class="clearfix"></span> </div> <div class="spacer">10 elements</div> <div class="container"> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <span class="clearfix"></span> </div> <div class="spacer">11 elements</div> <div class="container"> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> <span class="clearfix"></span> </div> 

Answer 3

您可以考慮使用css-grid ：

封裝這些div的任何內容（無論是另一個div還是正文）都將需要以下樣式display: grid或display: inline-grid

 .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "abc"; } .a { grid-area: a; } .b { grid-area: b; } .c { grid-area: c; } 

 <h4>Two div</h4> <div class="wrapper"> <div class="b">Two</div> <div class="c">Three</div> </div> <h4>Three div</h4> <div class="wrapper"> <div class="a">One</div> <div class="b">Two</div> <div class="c">Three</div> </div> 

只是解釋一下：

display: grid ，當然，使我們能夠將孩子安排成網格。

grid-template-columns:確定網格上我們的列的數量/大小。 1fr是一個度量單位，例如100px或33% ，但與px或%不同， fr動態分配了全部的一小部分。 （因此1fr 1fr 1fr分配3個大小相等的列，我們也可以做類似1fr 2fr這樣的事情，即將第一列分配為總寬度的1/3，第二列分配為總寬度的2/3）

grid-template-areas:為我們提供了出色的組織策略。 我們可以命名網格位置，以使它們更容易分配內容在何處。 我們將列命名為a b和c 。

grid-area就是我們通過在grid-template-areas設置的名稱引用要在網格中的何處呈現的方式。

---

另一種選擇是使用浮動權利

 .wrapper { width: 100%; height: 50px; } .box{ float: right; width: 33.333%; } 

 <div class="wrapper"> <div class="box">Two</div> <div class="box">One</div> </div> <div class="wrapper"> <div class="box">Three</div> <div class="box">Two</div> <div class="box">One</div> </div>