html - 容器中的中心溢出 float Div

Question

我目前有一个简单的设置:一个居中的容器 div，占屏幕宽度的 90%，其中包含五个宽度为 20% 的 div。当 div 都适合行时，这很有效。它们都进行了调整，以便它们均匀分布并居中。但是，由于 5 个 div 必须具有最小宽度，因此当用户将屏幕调整为较小的宽度时，它们会填满一行以上并且不再居中。一旦发生这种情况，我希望它们保持最小宽度，但要居中，以便您可以在 div 顶行的任一侧看到蓝色容器 div，而不是让它们全部左对齐(对于以下行也是如此)。我怎样才能在 HTML 和 CSS 中做到这一点？谢谢。

<style type="text/css">
.container {
  height: 220px;
  width: 90%;
  max-width: 1200px;

  margin-left: auto;   
  margin-right: auto;

  background-color: blue;
}

.box {
  position: relative;
  height: 100%;
  width: 20%;
  min-width: 200px;

  margin: 0 auto;
  float: left;

  background-color: red;
}
</style>


<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div> 

Answer 1

如果不使用 float ，则使用 display:inline-block连同text-align:center我想你会得到你想要的居中效果。

.container 
{
    text-align:center;
}

.box 
{
    display:inline-block;
    /*For IE*/
    *display: inline;
    zoom:1;
    /*Aligns divs vertically along the top*/
    vertical-align:top;
}

这里的例子:

http://jsfiddle.net/DigitalBiscuits/pXGz3/3/

(调整结果窗口大小看效果)

注意:使用内联 block 时，请确保 <div> 之间没有回车符秒。否则你会在它们之间得到一些不需要的空间