2

コンテキスト：

ロールプレイングのスタートレックフリート用にjQueryまたはPhPで使用するdiv名簿を作成しています（オタク、はい、わかっています）。XMLからプルして名簿を自動的に生成し、多くの名前が追加された場合に合わせてdivのサイズを自動化するのに十分な堅牢性を実現するために、divが特定の方法で動作する必要があります。

Firebugなどを使用した現在のビルド例を見て、私が何をしているのかを理解するのに役立ちます。

要件：

各サブセクション（前哨要員、前哨防衛）には、いくつかのdivが必要です。

1）背景画像とサブセクションコンテナ（この例ではdiv id = outpostPersonnel）

2）リストの両側、左右のサブサブセクションコンテナ。（新聞の段落を考えてください。）

3）要件1でその背景画像を塗りつぶす/整列するために必要な名簿名の上位n個（div id = initialCommandTags（左側のリスト）およびinitialPersonnelTags（右側のリスト））

4）追加の名簿名がn個あるDiv。（div id = overlayCommandTags、overflowPersonnelTags、）

5）LCARSが要件4のn個の名簿名をまだカプセル化しているように見せるためのカラーdivストライプ（div id = colorStretchLeft）

問題：

親サブセクション（1からのdiv（outpostPersonnel））を、そのすべての子divの高さに正確に準拠させることができません-overflowCommandTags /overlayPersonnelTagsdivの高さまでずっと。

私が試した1つの方法で、次のサブセクション（Outpost Defense）はoverflowCommandTagsdivと重複しています。もう1つは、現在の例（およびあきらめた場所）で、overflowTags divの終わりと次のサブセクション（outpostDefense）の上部の間に最大160ピクセルの高さの空白スペースを配置します。

私の現在のビルド例をファイアバグすると、子divのどれもそれほど高くないにもかかわらず、親div（outpostPersonnel）がずっと下に伸びていることがわかります。

Overflow：autoとOverflow：hiddenは、私が読んだ限りでは実行可能なソリューションではありません。これは、divを完全に拡張する必要があり、スクロールバーがないためです。

私は完全に困惑しています。それが本当に単純な解決策でもあるのを見てください。親divがBGのみであり、子divには実際のコンテンツがあるという事実と関係がありますか？

ここまでお付き合いいただきありがとうございます！乾杯！

（（また、私のdivスタイルのものがインラインである理由は、これをEnjinページに埋め込んでいて、*。cssファイルを呼び出すことができないためです。））

4

1 に答える 1

2

ここで言及すべきことがいくつかありますが、まず、2 つのセクション間のギャップの理由から説明します。

あなたのインラインスタイルから私が見ることができるものから、あなたが使用position: relativeし、さまざまなtop値を使用leftして、目的のレイアウトを実現しました。personnelContainer追加した ID の要素にtop: -230px. これがギャップの原因です。

要素を相対的に配置するときは、要素が元の位置にあり、視覚的に移動しただけであると想像する必要があります。つまり、要素を移動してもページの流れは変わらないため、例のように負のトップ値を適用してもコンテナの高さは変わりません。(参考文献: http://reference.sitepoint.com/css/relativepositioning )

これを念頭に置いてtop、ギャップを埋めるために、後続の各セクションにマイナスの値を適用するルートをたどることができますが、これにより問題がさらに複雑になり、コンテンツの重複につながる可能性があります.

フローティング レイアウトに関する次の記事を読むことをお勧めします 。
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html

この場合、floatプロパティを使用してレイアウトを実現する必要があります。上記の記事を読むと、フローティング レイアウトの基礎と、セクションにすべてが正しく含まれていることを確認する方法が理解できます。どの子要素にも固定の高さを設定しない限り、コンテンツの量に合わせて拡張されます。

于 2013-01-22T22:13:38.067 に答える