html - 涉及浮动左元素时如何修复自动边距

Question

有一个用于div 的类page，一个container用于 div 框行的类，以及一个用于box设置所有框样式的类。

div 框的行需要在页面上居中。

需要什么组合width + display + margin（跨浏览器）？

这些框是向左浮动的，这似乎是问题的根源。

当前的 CSS：

.page {
  width: 100%;
}

.container {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.box {
  float: left;
  margin: %;
}

Answer 1

你想display:inline-block在你的盒子里使用，像文本一样有效地对待它们，然后text-align:center在你的容器中设置

.container {
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: grey;
}

演示小提琴

Answer 2

我做了一个jsFiddle。它的固定宽度。我的问题是会有多少 .box 元素？

如果它是动态的，那么使用一些 javascript 来计算 '.box' 的宽度

http://jsfiddle.net/james_nicholson/4P9s8/10/

.page {
  width: 100%;
    border:1px solid black;
    height:auto;
}

.container {
  width: 440px;
  display: block;
  margin: 0 auto;
  background:blue;
  min-height:500px;
}

.box {
     float: left;
    width: 100px;
    background: red;
    margin: 5px;
    display: block;
    height: 100px;

}