当前位置：首页 → 问答吧 → divcss高手来挑战一下，这样的div可以用css写出来吗？

divcss高手来挑战一下，这样的div可以用css写出来吗？

时间：2011-05-16

来源：互联网

如下图，div，里面很多条状div，条状物高度不一，现在要外面的div询问对齐，并从左到右排列，中间可以不要空隙，最好能够，外部div的高度可调节，自动适应条状div的高度

附件

11.GIF (11.35 KB)

2011-5-16 13:43

作者: flypigyang 发布时间: 2011-05-16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3练习</title> <style type="text/css"> body {margin:0;} div {position:fixed;top:0;left:0;width:6.25%;height:100%;text-align:center;color:#FFFF00;background-color:#000000; -webkit-transition-property:-webkit-box-shadow,box-shadow,top,background-color; -webkit-transition-duration:600ms; -webkit-box-shadow:5px 2px 6px #CCCCCC; box-shadow:5px 2px 6px #CCCCCC; } div:nth-child(2) {left:6.25%;background-color:#111111;} div:nth-child(3) {left:12.5%;background-color:#222222;} div:nth-child(4) {left:18.75%;background-color:#333333;} div:nth-child(5) {left:25%;background-color:#444444;} div:nth-child(6) {left:31.25%;background-color:#555555;} div:nth-child(7) {left:37.5%;background-color:#666666;} div:nth-child(8) {left:43.75%;background-color:#777777;} div:nth-child(9) {left:50%;background-color:#888888;} div:nth-child(10) {left:56.25%;background-color:#999999;} div:nth-child(11) {left:62.5%;background-color:#AAAAAA;} div:nth-child(12) {left:68.75%;background-color:#BBBBBB;} div:nth-child(13) {left:75%;background-color:#CCCCCC;} div:nth-child(14) {left:81.25%;background-color:#DDDDDD;} div:nth-child(15) {left:87.5%;background-color:#EEEEEE;} div:nth-child(16) {left:93.75%;background-color:#FFFFFF;} div:hover {top:25%;background-color:#000000; -webkit-box-shadow:5px -5px 6px #CCCCCC; box-shadow:5px -5px 6px #CCCCCC; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
提示：您可以先修改部分代码再运行

挑战不敢，前几天手痒，随便写了一个，好像也是一条一条的