问题很简单我有一堆将要制作瓷砖的元素.但是,其中有些较高;让我们说其他的两倍.我希望所有的人都可以通过纯CSS样式来匹配瓷砖.
这是我有的:
这就是我想要的:
这是我的代码:
<!DOCTYPE html> <html> <head> <style type="text/css"> div { Box-shadow: 0 0 1px black inset; width: 100px; display: inline-block; } #d1,#d2,#d4,#d5,#d6,#d8,#d9{ height: 100px; background-color: yellow; } #d7,#d3{ height: 200px; background-color: red; } </style> </head> <body> <div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div> </body> </html>
你可以在JSBin:http://jsbin.com/usovek/1/edit上试试
笔记:
>内容是动态的
>盒子数可以有所不同
>任何一个盒子可以更长.并且可能更广泛.
>箱子的宽度或高度总是多个单位.这个例子中的单位是50,一些框是50,有些是100px高.但是如果问题解决了任何数量的单位(1,2,3 …,它们是50px,100px,150px,…),这将是完美的.