自适应的,隔行换色的,左右两列展示的表单
案例背景:
要实现一个表单,隔行变色,默认左右两列展示
当某一行内容过多的时候,则一行展示
内容自适应,可扩展……
方案A:
要实现一个表单,隔行变色,默认左右两列展示
当某一行内容过多的时候,则一行展示
内容自适应,可扩展……
方案A:
效果图
![](https://images2015.cnblogs.com/blog/777572/201706/777572-20170622194514804-2112255346.png)
在线预览地址
http://output.jsbin.com/wilovadipi
li:nth-of-type(odd)和li:nth-of-type(even)
开始想直接通过这样奇数偶数行不同背景色实现
但是当内容少,一行展示两列时刻,左右两列颜色不同,pass
方案B:
li:nth-of-type(odd)和li:nth-of-type(even)
开始想直接通过这样奇数偶数行不同背景色实现
但是当内容少,一行展示两列时刻,左右两列颜色不同,pass
方案B:
效果图
![](https://images2015.cnblogs.com/blog/777572/201706/777572-20170622194535523-1206446814.png)
http://output.jsbin.com/lepujuhoko
background: repeating-linear-gradient{};
li{line-height:50px;}
通过渐变色背景实现,可以实现隔行换色
但是当内容不规则的时候,内容很多的时候,超出高度50px的行间距,内容就会撑破背景色……
方案C:
background: repeating-linear-gradient{};
li{line-height:50px;}
通过渐变色背景实现,可以实现隔行换色
但是当内容不规则的时候,内容很多的时候,超出高度50px的行间距,内容就会撑破背景色……
方案C:
效果图
![](https://images2015.cnblogs.com/blog/777572/201706/777572-20170622194559773-1234169006.png)
在线预览地址
http://output.jsbin.com/miwecolivi
2个样式名实现
.row2 { 49%; display: inline-block;}
.row1 { 100%; background: #F1F6F7;}
这样需要手动去调整了,当内容少,则一行放两个li .row2
当内容多,则放一个li即可 .row1
方案D:
效果图
![](https://images2015.cnblogs.com/blog/777572/201706/777572-20170622194622273-781832449.png)
在线预览地址
http://output.jsbin.com/sumibupipa
嵌套一层div
ul
li
div
div
这样去实现
li:nth-of-type(odd){background: #F1F6F7;}
li>div{display: inline-block; min- 49%;}
两个内联块div放在一个li里面,给li设置背景色,则可隔行变色
div 49%宽度 超出即可自适应换行 ,背景色也会包满
多谢 yate,coco等 指点得以完善
嵌套一层div
ul
li
div
div
这样去实现
li:nth-of-type(odd){background: #F1F6F7;}
li>div{display: inline-block; min- 49%;}
两个内联块div放在一个li里面,给li设置背景色,则可隔行变色
div 49%宽度 超出即可自适应换行 ,背景色也会包满
多谢 yate,coco等 指点得以完善
预览地址:
http://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