自适应的，隔行换色的，左右两列展示的表单

自适应的，隔行换色的，左右两列展示的表单

 

案例背景：
要实现一个表单，隔行变色，默认左右两列展示
当某一行内容过多的时候，则一行展示
内容自适应，可扩展……

方案A:

效果图

 

在线预览地址

http://output.jsbin.com/wilovadipi
li:nth-of-type(odd)和li:nth-of-type(even)
开始想直接通过这样奇数偶数行不同背景色实现
但是当内容少，一行展示两列时刻，左右两列颜色不同，pass

方案B:

效果图

 

在线预览地址

http://output.jsbin.com/lepujuhoko

 background: repeating-linear-gradient{}；
 li{line-height:50px;}
 通过渐变色背景实现，可以实现隔行换色
 但是当内容不规则的时候，内容很多的时候，超出高度50px的行间距，内容就会撑破背景色……

方案C:

效果图

 

在线预览地址

http://output.jsbin.com/miwecolivi

2个样式名实现
.row2 {width: 49%; display: inline-block;}
.row1 {width: 100%; background: #F1F6F7;}
这样需要手动去调整了，当内容少，则一行放两个li .row2
当内容多，则放一个li即可   .row1


方案D:

效果图

 

在线预览地址

http://output.jsbin.com/sumibupipa

嵌套一层div
ul
   li
      div
  div
这样去实现
li:nth-of-type(odd){background: #F1F6F7;}
li>div{display: inline-block; min-width: 49%;}
两个内联块div放在一个li里面，给li设置背景色，则可隔行变色
div 49%宽度  超出即可自适应换行 ，背景色也会包满

多谢 yate,coco等 指点得以完善 

预览地址：

https://files.cnblogs.com/files/leshao/%E5%B7%A6%E5%8F%B3%E8%A1%A8%E5%8D%95%E4%BE%8B%E5%AD%90%E9%9B%86%E9%94%A6.rar