問題タブ [css-grid]

たとえば、 css-grid(divAおよび) を使用して複数の div を含む Web ページがあります。divBまた、2 台のモニター (物理画面) があります。

divA最初のモニターと2番目のモニターに表示したいdivB。

次の質問に対する回答を探しています。

1. divA最初のモニターとdivB2 番目のモニターに (反応して)配置するにはどうすればよいですか?
2. このシナリオをテストするために、単一のモニターでデュアルスクリーンを操作できるシミュレーターはありますか?

どんな助けや提案も大歓迎です。

ありがとう、アシュウィン

Windows 8 用の JavaScript ベースの Metro アプリを開発しています。複数列の記事を持つコンテナーの背景を設定しようとしています。基本的に、左側にリストビュー、右側に複数列の記事があります (分割ビューに似ています)。

記事のフローを水平 (CSS プロパティの column-width を使用して複数列) に設定しようとしていますが、記事の背景を設定すると、ビューポートの端までしか設定されません。

分割アプリ テンプレートを使用して新しいプロジェクトを作成し、 split.htmlで次の HTML を現在の HTML ( body タグ内) に置き換えます。

split.css ファイルの内容を次の内容に置き換えます。

アプリを実行し、ハブの任意のタイルをクリックして、split.html を表示します。右にスクロールして、背景色の記事が適切でないことに注意してください。

私はBootstrapを試しており、jsfiddle.net を使用して簡単で汚れたテストを作成しています。

ただし、非常に単純なテストでレンガの壁にぶつかっています。Bootstrap でグリッド システムを見たいだけなので、最初の例を複製しました。

ただし、うまくいかないようです。"Span 4" と "Span 8" は、予想される 2 列のレイアウトではなく、積み重なって表示されます。

明らかな何かが欠けていますか？これがフィドルです：http://jsfiddle.net/8Xf2j/1/

ありがとう

canvasButtonsこれを Windows アプリと Chrome Web ブラウザーで使用しようとしていますが、Web ブラウザーにdivが表示されません。canvasButtonsの下に が表示されるようにします#canvasDiv。overflow:hiddenプロパティが原因で表示されません。しかし、Windowsアプリとしては問題なく動作します。ms-grid に相当するものはありますか?

セクションに使用display: flexしてみましたcanvasButtonsが、それでもうまくいきませんでした。divはcanvasButtons思い通りに配置されましたが、後でクリック ハンドラーが機能しませんでした。

店頭に商品を陳列しております。各製品には専用の箱があります。ボックスをグリッドに配置し、1 行に 2 つ配置します。ただし、それらはカテゴリにも分類されるため、そのカテゴリに属する​​各ボックス セットの上に全幅の見出しを付けたいと考えています。ここに私のHTMLがあります:

そしてCSS：

そしてJSフィドル

ご覧のとおり、グリッドは 2 番目の h2 要素が導入されるまで正常に機能しますが、その後、最後のセットに奇数のボックスがある場合に 2n+2 が破棄されるため、崩壊します。基本的に私がする必要があるのは、各見出しの後に 2n+2 式をリセットすることです。

手っ取り早く汚い方法は、各ボックス セットを div でラップすることですが、不要なマークアップをページに導入することは避けたいと思います。

よりクリーンなソリューションはありますか？

CSS グリッドを調べていると、奇妙なことに遭遇しました。3 つの列が必要です。1 と 3 は幅が150px広く、2 は残りです。それは可能だと思いましたが、これはうまくいきませんでした：

だから私はこれを試しました、そしてそれはうまくいきますが、ばかげています:

そして、私はこの例に出くわしました: http://gridbyexample.com/examples/code/layout1.htmlは、これを使用してコンテンツ列を自動サイズにします:

それが私がしたことです！そして、彼らの例は機能しますが、私のものは機能しません!?

私のフィドルの例: http://jsfiddle.net/rudiedirkx/w5xho67w/3/ (画面が 700px 以上の場合、3 列がトリガーされます)。

私は何か愚かなことをしているに違いありませんが、違いがわかりません...

そうじゃない：

• なぜならbody、grid
• iframeだから
• ラッパー（body）は固定幅ではないため（どちら100%も900px機能しません）

<button>タグの内部要素をフレックスボックスので中央に配置しようとしていjustify-content: centerます。しかし、Safari はそれらを中央に配置しません。同じスタイルを他のタグに適用でき、意図したとおりに機能します ( <p>-tag を参照)。ボタンのみ左揃えです。

Firefox または Chrome を試してみると、違いがわかります。

上書きしなければならないユーザー エージェント スタイルはありますか? または、この問題に対する他の解決策はありますか?

そしてjsfiddle： http://jsfiddle.net/z3sfwtn2/2/

次のテーブルレイアウトを実現しようとしています:

3 番目の列は、セル内のコンテンツに適合します。
最後は100px固定です。
最初の 2 つの列は残りのスペースをプロポーションと共有します。

次のプロパティを持つフレックス コンテナー (青い四角) があります。

したがって、その子 (水色の正方形) は、以下に示すように配置されます。ただし、通常のフローから別の子 (緑色の四角形) を追加し、その親に対して相対的に配置したいと考えています。bottom: 20px;以下に示すように配置するには、理想的にはandのように記述しmargin: auto;ます。

z-index私は無駄に遊んでみました。これにどのようにアプローチすればよいですか？別の親要素を作成する必要がありますか?