包装Div就像在Windows Phone网格选择器中一样

Question

我想在HTML 5中制作方形div，如图所示。

这是我的HTML5代码 - CSS文件应该是什么，所以它可以像图片中一样？

（如果可以在Bootstrap中，请给我所需的课程而不是CSS代码）

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    ....
</div>

Answer 1

.square {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
}

.container {
   width: 200px;
}

Answer 2

你有什么尝试？这样的事情可以解决问题：

.container{width:330px;}
.square{float:left; width:100px;height:100px;background-color:red;margin-right:10px;margin-bottom:10px;}

Answer 3

这是一个简单的例子：

.container{
  width:200px;
}

.square{
  width:50px;
  height:50px;
  background:blue;
  float :left;
  margin: 10px 0 0 10px;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>