自动换位DIV(CSS)

时间:2014-03-03 17:32:59

标签: 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张图片。我该怎么办?

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

提前致谢!

1 个答案:

答案 0 :(得分:3)

像这样: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;
}