求高手给一个Metro风格布局

WBOY
Release: 2016-06-23 13:44:42
Original
1071 people have browsed it

用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>
Copy after login

用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>";
Copy after login

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template