Question

为page创建一个类，为div-box行创建一个container类，为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;
}

<强> Demo fiddle

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;

}

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

2 个答案: