我该如何包装div？

Question

基本上,我希望外部div外部的内部div根据外部div的宽度进行换行,而外部div又根据浏览器窗口的宽度进行扩展和收缩,如下所示:

.---------------------.
|                     | <-- Browser Window
| .-----------------. |
| |  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| |                 | |
| |  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| `-----------------` |
|                     |
`---------------------`

.-------------------------------.
|                               | <-- Browser Window enlarged
| .---------------------------. |
| |  ,-,  ,-,  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  |X|  |X| <----- Inner divs wrap around accordingly, as if
| |  `-`  `-`  `-`  `-`  `-`  | |     they are text
| |                           | |
| |  ,-,                      | |
| |  |X|                      | |
| |  `-`                      | |
| `---------------------------` |
|                               |
`-------------------------------`

什么是最好的(就像开发者时间最简单的方式)实现这一目标的方法？

Answer 1

设置为此块 - display: inline-block和主容器的宽度...

  .div {
     display: inline-block;
  }

http://jsfiddle.net/guh5Z/1/