更改寬度取決於兒童總數div

Question

我有4 div s與button類別。 有時一個頁面可能有5個div與該類名稱，所以我需要改變它們的寬度，以使它們適合頁面。

這是我的CSS：

<style> 
.button{ 
    width:25%; 
} 
@media only screen and (max-device-width: 480px) { 
    .button{ 
    width:100%; 
    } 
} 
</style> 

這是我的html：

<div id="center"> 
<div class="button" style=" background: blue; float:left;">test</div> 
<div class="button" style=" background: red; float:left;">test</div> 
<div class="button" style=" background: purple; float:left;">test</div> 
<div class="button" style=" background:orange; float:left;">test</div> 
</div> 

這是我嘗試在JavaScript

<script type="text/javascript"> 
$(document).ready(function() { 
    if($("#center div").length == 4); 
     button.style.width = '25%'; 
    } 
    else{ 
     button.style.width = '20%'; 
    } 
}); 
</script> 

但是這個腳本不起作用。

Answer 1

從.button元件

<div id="center"> 
<div class="button" style=" background: blue;">test</div> 
<div class="button" style=" background: red;">test</div> 
<div class="button" style=" background: purple;">test</div> 
<div class="button" style=" background: orange;">test</div> 
<!-- div class="button" style=" background: green;">test</div --> 
</div> 

並使用display: table/table-cell刪除所有浮體以獲得內部元件

的相等的寬度

#center { display: table; width: 100%; } 
.button { display: table-cell; } 

@media only screen and (max-width: 480px) { 
    #center, .button { 
     display: block; 
    } 
} 

table-*值廣泛支持（即使在IE8）

codepen示例：http://codepen.io/anon/pen/MYxMvg
（嘗試除去從最後一個div）

---

的評論，如果您需要，而不是專門設置一個寬度（或者也可以是不同的屬性比寬度），你可以同與float玩和：nth-last-child僞類如

.button { float: left; } 

/* style assigned from the fourth-last element onwards */ 
.button:nth-last-child(n + 4), 
.button:nth-last-child(n + 4) ~ div { 
    color: white; 
    width: 25%; 
} 

/* style assigned from the fifth-last element onwards 
    (override previous rules) */ 
.button:nth-last-child(n + 5), 
.button:nth-last-child(n + 5) ~ div { 
    color: yellow; 
    width: 20%; 
} 

/* style for <= 480px (with higher specificity) */ 
@media only screen and (max-width: 480px) { 
    #center .button { 
     float: none; 
     width: 100%; 
    } 
} 

例如在codepen：http://codepen.io/anon/pen/xbBoPR

Answer 2

作爲一個JavaScript的解決方案，你可以得到.button孩子的數量，並設置其寬度100%/number-of-chilren。

var divs = $('#center').children('.button'); 
 
divs.width(100/divs.length + '%');

.button { float:left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="center"> 
 
     <div class="button" style="background: blue;">test</div> 
 
     <div class="button" style="background: red;">test</div> 
 
     <div class="button" style="background: purple;">test</div> 
 
     <div class="button" style="background:orange;">test</div> 
 
    </div>

---

然而，如果靈活盒佈局是一個選項，你可以通過添加display: flex到容器和flex: 1給孩子得到同樣的結果。

#center { 
 
    display: flex; 
 
} 
 

 
.button { 
 
    flex: 1 
 
}

<div id="center"> 
 
    <div class="button" style=" background: blue;">test</div> 
 
    <div class="button" style=" background: red;">test</div> 
 
    <div class="button" style=" background: purple;">test</div> 
 
    <div class="button" style=" background:orange;">test</div> 
 
</div>

賣方前綴由於簡潔省略。

Answer 3

我看不出一個明顯的方式來做到這一點與純CSS沒有黑客，但我寫了你應該做的伎倆的jQuery方法。

See the JSFiddle here for demo + code.

function setDynamicWidths(){ 
    var num = $("div.button").length;  // Get number of divs 
    var width = 100/num;      // Calculate width as % 
    $("div.button").css('width',width+'%'); // Set width of divs 
} 

所以，你可以調用該方法或粘貼其內容的某處成像$(document).ready(function(){ /* code here */ });塊。

不要忘記也包含jQuery庫。

希望能幫到:)