Create equal-width div's with CSS

I have a div with a certain width and within this parent div I would like to place one or more 'child' divs. I would like them to be placed next to each other (so I'm using either float:left or display:inline-block) and I want them to all be the same width. I pretty much want them to fill the parent div (so if I have 4 divs they should each be 25% width, if 5 20% width etc) with a certain max-width. They key here is that it should work no matter the number of divs - could be 1, could be 5 could be 15.

I have tried doing this in the following jsFiddle, but I can't figure out how to make it work without any JavaScript. jsFiddle

I guess my problem is that divs usually expand to the width of their content where I want them to expand to fit 开发者_如何学编程the parent? I can try width:100% on all the child divs, but it doesn't seem like this plays too well with float:left or display:inline-block.

---

Maybe make it as a table, and add all elements as td inside one tr. If you want here is a jQuery Solution

EDIT

This is the only way I can think of using pure CSS, not sure if there is any other way

Also check this already existing question Distribute elements evenly using CSS in SO

---

The best option is display:flex for parent div and use flex-basis:100% in child div

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.flex-item {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  background: tomato;
  padding: 5px;
  height: 150px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: 1px solid #333;
  box-sizing: border-box;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

---

Maybe the use of display: table; would help? http://jsfiddle.net/g4dGz/119/

---

What about: http://jsfiddle.net/TnCCd/

Borders add to width, and the overflow: hidden bit will clear the floats so the container doesn't collapse

---

It sounds like this would easiest be achieved by using a table (although this is a swearword in these tableless-times). Not knowing what the elements is used for I don't know if this is semantically correct.

You could also try experimenting with display:table-cell etc. But that's less compatible with older browsers...

---

I'm just going to through this out there - you may be best off going with gasp TABLES (oh no what did he say! aaaaaaah!)

http://jsfiddle.net/taw57/

EDIT: My fiddle shows your broken div version with two table versions with differing numbers of columns.