изменение ширина в зависимости от всего количества детей div

Question

У меня есть 4 div s с классом button. Иногда страница может иметь 5 div s с этим именем класса, поэтому мне нужно изменить их ширину, чтобы они были вписаны в страницу.

Это мой 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)

Пример кода: http://codepen.io/anon/pen/MYxMvg
(попробуйте чтобы удалить комментарий от последних дел)

---

Если вам нужно вместо того, чтобы конкретно установить ширину (или также другое свойство, чем ширина) вы можете играть с как с float и: nth-last-child pseudoclass например

.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.

Надеюсь, что поможет :)