css - 自动换位DIV(CSS)

我的小提琴：http://jsfiddle.net/f5e5d/1/

.item-data {
  width:34px;
  height:34px;
  background-size: 34px auto !important;
  margin: 2px;
  border: 1px solid #000;
  display:table-cell;
}
.test_div {
    background-color: #eee;
    width: 100%;
    padding: 20px;
}
.match_details {
    display:table-cell;
}

我只想在一行中显示3张图片。我该怎么做？

现在，我已经在1行中显示了所有6个项目。

提前致谢！

最佳答案

像这样：http://jsfiddle.net/NicoO/f5e5d/4/

.item-data {
  width:34px;
  height:34px;
  background-size: 34px auto !important;
  margin: 2px;
  border: 1px solid #000;
  float: left;
}

.item-data:nth-child(3n+1)
{
    clear: left;
}

.test_div {
    background-color: #eee;
    overflow: hidden;
    padding: 20px;
}