Heim > Artikel > Backend-Entwicklung > 求高手给一个Metro风格布局
用table,初始表格共3行6列
单元格三种规格:1x1 2x1 2x2 ,随机
如下图所示:
谢谢!
这个意思?
<table border=1 style='width:100%; table-layout:fixed;'><tr><th colspan=2>我是标题</th><th rowspan=2 colspan=2>我是标题</th><th colspan=2>我是标题</th></tr><tr><th rowspan=2 colspan=2>我是标题</th><th>我是标题</th><th>我是标题</th></tr><tr><th colspan=2>我是标题</th><th colspan=2>我是标题</th></tr></table>
这个意思?
用css+div 可能要简单些
单元格(三种规格:1x1 2x1 2x2 )需要随机出现
给你个思路,自己调整去吧
$ar = array( array('1x2', '我是标题'), array('2x2', '我是标题'), array('1x2', '我是标题'), array('2x2', '我是标题'), array('1x1', '我是标题'), array('1x1', '我是标题'), array('1x2', '我是标题'), array('1x2', '我是标题'), array('2x2', '我是标题'), array('2x2', '我是标题'), array('1x1', '我是标题'), array('1x1', '我是标题'), array('1x1', '我是标题'), array('1x1', '我是标题'),);shuffle($ar);$box = array( array(1, 1, 1, 1, 1, 1), array(1, 1, 1, 1, 1, 1), array(1, 1, 1, 1, 1, 1),);$res = array();foreach($ar as $ind=>$item) { list($h, $w) = explode('x', $item[0]); //从左上角开始查找摆放的位置 $flag = 0; for($y=0; $y<count($box); $y++) { for($x=0; $x<count($box[$y]); $x++) { if($box[$y][$x] == 1 && isset($box[$y+$h-1][$x+$w-1]) && $box[$y+$h-1][$x+$w-1] == 1) { $flag++; break 2; } } } if($flag) { $res[$y][] = array('c' => $w, 'r' => $h, 'v' => $ind); for($i=0; $i<$h; $i++) { for($j=0; $j<$w; $j++) { $box[$y+$i][$x+$j] = 0; } } }}echo "<table border=1 style='width:100%; table-layout:fixed;'>";foreach($res as $row) { echo '<tr>'; foreach($row as $cell) { echo "<th colspan=$cell[c] rowspan=$cell[r]>{$ar[$cell['v']][1]}</th>"; } echo '</tr>';}echo "</table>";