Metro スタイルのレイアウトを教えてください

WBOY
リリース: 2016-06-23 13:44:42
オリジナル
1070 人が閲覧しました

テーブルを使用します。初期テーブルは 3 行 6 列です。
3 つのセル仕様: 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 を使用してランダム化を実装したいと考えています。

セル (3 つの仕様: 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>";
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート