3
水平と垂直複数の小さなdivと1つのLarge-divが並んでいますか？
このような構造はどうすれば作成できますか？私の最初のアイデアは4ピンクを1つのオレンジに組み合わせて4pinksVS1orangeを得ることでした（次のパズルは、私が知らないものを並べて配置することです、いくつかのhxcksを知っていますが、簡単に壊れます）。その後、そのパズルは4つのピンク（もう1つは同じサイド・バイ・サイド・パズル）を持つ最下行です。わかりやすくするためにborder:0とします。私はfloat-hxck、おそらくposition: absoluteを望んでいません - 申し訳ありませんが、私は確かに分かりません。あなたが私の場合を解決しようとする方法を見つけることができますが、誰かがより賢いアイデアを生み出すことができると確信しています。
CSS
<!--vim: nowrap:-->
<style type="css">
#body{
width:800px;
border:0;
}
#yellow{
width:400px;
}
<!--ERR: poor reuse? How better?-->
#pinkFour{
width:400px;
height:400px;
}
#pinkOne{
width:100px;
height:100px;
}
/* ERR: poor reuse? How's better? */
#concatenatePinkYellow{
width:800px;
height:400px;
}
#pinkRow{
width:800px;
height:100px;
}
</style>
ボディ
<body>
<div id="concatenatePinkYellow">
<div id="pinkFour"> </div>
<!-- HORIZONTAL-VERTICAL SBS -->
<div id="yellow"> </div>
</div>
<div id="pinkRow">
<!--TODO: four pinks here-->
<!--HORIZONTAL SBS-->
<!--TODO: how to place them side-by-side?-->
</div>
</body>
目標： REUSE！
の例では、レイアウト
4x4{1x1}4x4{4x4};8x1{1x1}
を持っていた今、私はどのように、周囲の中間とピンクの箱にオレンジ色のボックスとレイアウトをしたいと仮定？後者の構文では、それはちょうどです：
8x8{1x1};2x1{1x1}2x2{2x2}2x1{1x1};8x8{1x1}
...それはそれ以上難しくありませんか？上記のような構文で異なるジオメトリを高速に生成するツールはありますか？簡単にするため、ボックス内のコンテンツは気にしないでください。
答えは明らかである[CSS3グリッドレイアウト]（http://dev.w3.org/csswg/css3-grid-align/）しかし、それは唯一のブラウザで正しく表示さよ、IE10（ベータ版、 W8のみ、マーケットシェア0.02％）:) – FelipeAls
これらの色付きのボックスに入るコンテンツを記述できますか？同じタイプのコンテンツの9倍で、他のコンテンツよりも1つ大きいコンテンツですか？私の経験では、画像の場合でも 'height'のようなものはありません（' @ alt'で置き換えることができ、可変長です）。その理由は、1つのボックスが1つの理由で1pxより大きい場合にフロートが「爆発する」という理由です。可能であれば、リストのリスト、リストのリスト、コンテナーの心配のない平易なイメージ？ – FelipeAls
@FelipeAlsacreations：コンテンツについて心配しないでください。私の心配は*再利用*です。レイアウトを少し変更する必要があるとか、毎日レイアウトを少しずつ違うように自動生成したいとします。ボックスは毎日同じサイズです（または本当に必要な場合は小さなサイズ変更が可能です）。プレビューペーパーがこれに関するものなのかどうか、最後に説明されているような高水準の機能を提供するためのツールが必要ですか？ – hhh