四个盒子与css并排

Question

我想制作四个相同的盒子，每个盒子里有10个小（拇指）盒子。怎么用css完成？这是目标的形象。

到目前为止，我有左栏框

.left_column{
     margin-top: 10px;
     width: 150px;
     float: left;
     border:2px solid #ccc;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     text-align: left;
     padding: 10px;
     font-size: 14px;
     background-color: #f0f0f0;
     color: #888;
}
.left_column p {
     text-align: center;
     border-bottom: 1px solid #ccc;
     font-size: 20px;
}
.left_column a {
     text-decoration: none;
     margin-left: 10px;
}

编辑： Here is the Fiddle

Answer 1

您可以为每个具有固定宽度的框创建一个容器，然后将缩略图放入其中。如果你使用float：left;在容器盒上，它们将根据窗口大小移动。

Answer 2

我可以建议使用弹性盒。

它只支持较新的浏览器，但实际上它非常易于使用且响应迅速。这是一个小解释： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

内部内容可以由float:left;和display: inline-block;简单创建 以下是jsfiddle的示例： http://jsfiddle.net/fpuwk7dL/