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.