Home  >  Article  >  Backend Development  >  求高手给一个Metro风格布局

求高手给一个Metro风格布局

WBOY
WBOYOriginal
2016-06-23 13:44:421045browse

用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 可能要简单些

这个意思?
用css+div 可能要简单些


简短的html静态语言我会,我要用php实现随机的。

单元格(三种规格: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>";

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn