在水平线上均匀分布div

Question

我试图在水平线上均匀分配div.我将在屏幕的最大宽度上有3个div.当我调整浏览器的大小并且它不能适合3时,它将切换为两个,然后一个.我已经找到了一些如何完成这个的例子,但没有一个按照我想要的方式做到.例如,我想要的是:

全屏宽度:

[------------------------------------------]
[   [--------]   [--------]   [--------]   ]
[   [        ]   [        ]   [        ]   ]
[   [        ]   [        ]   [        ]   ]
[   [--------]   [--------]   [--------]   ]
[                                          ]
[   [--------]   [--------]   [--------]   ]
[   [        ]   [        ]   [        ]   ]
[   [        ]   [        ]   [        ]   ]
[   [--------]   [--------]   [--------]   ]
[------------------------------------------]

调整宽度:

[-----------------------------]
[   [--------]   [--------]   ]
[   [        ]   [        ]   ]
[   [        ]   [        ]   ]
[   [--------]   [--------]   ]
[                             ]
[   [--------]   [--------]   ]
[   [        ]   [        ]   ]
[   [        ]   [        ]   ]
[   [--------]   [--------]   ]
[                             ]
[   [--------]   [--------]   ]
[   [        ]   [        ]   ]
[   [        ]   [        ]   ]
[   [--------]   [--------]   ]
[-----------------------------]

请注意,div每次都以页面为中心.

我能够找到的是这些示例强制div与div的边界左右,然后空间事件分布如下例所示:

[-----------------------------]
[[--------]         [--------]]
[[        ]         [        ]]
[[        ]         [        ]]
[[--------]         [--------]]
[                             ]
[[--------]         [--------]]
[[        ]         [        ]]
[[        ]         [        ]]
[[--------]         [--------]]
[                             ]
[[--------]         [--------]]
[[        ]         [        ]]
[[        ]         [        ]]
[[--------]         [--------]]
[-----------------------------]

以下是我尝试过的代码示例:

• http://jsfiddle.net/k9FqG/ ---这只是文本对齐的原因,但这不适用于div,只是文本.我需要文字保持左对齐.当我调整浏览器大小时,这也不会丢弃div.
• http://radiatingstar.com/distribute-divs-images-equaly-line
• http://jsfiddle.net/BYEw5/ ---这只是文本对齐的原因,但这不适用于div,只是文本.我需要文字保持左对齐.当我调整浏览器大小时,这也不会丢弃div.

Answer 1

希望这是你想要做的!

CSS

#container {
 width:100%;
 text-align:center;
}
#container > div {
 width: calc(100% / 6);  
 display: inline-block;
 vertical-align: top;   
 border:1px solid red;
 text-align:center;
 margin:2%;    
 padding:20px;
}

HTML

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

请参阅http://jsfiddle.net/bvgn46hu/1的行动