小编dav*_*zzo的帖子

剥离带有包装物品的弹性桌子的斑马

我正在寻找最简单的方法来斑马条纹下面的响应式flexbox表上的行.

换句话说,在这个例子中,第2行和第4行,但无限制,我不知道会有多少行,因为这是CMS系统中的可重用组件.

HTML无法更改,但行数和列数将经常更改.我很高兴为列设置限制而不是行.

有没有办法在纯CSS中做到这一点？

.Rtable {
  display: flex;
  flex-wrap: wrap;
}

.Rtable-cell {
  box-sizing: border-box;
  flex: 33.33%;
  margin: -1px 0 0 -1px;
  padding: 5px 10px;
  border: solid 1px slategrey;
}

h3 { margin: 0; }

@media all and (max-width: 500px) {
  .Rtable {
    display: block;
  }
}

Run Code Online (Sandbox Code Playgroud)

<div class="Rtable">

  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Ice</div>
  <div style="order:3;" class="Rtable-cell">No direwolf</div>
  <div style="order:4;" class="Rtable-cell">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a …

Run Code Online (Sandbox Code Playgroud)

html css css-selectors css3 flexbox

dav*_*zzo

2016 03-12

8
推荐指数

1
解决办法

1547
查看次数