2つのコンテンツサイズのHTML要素を並べて配置するにはどうすればよいですか？

Question

ウェブサイトのコンテンツでサイズが設定されたすべての要素について、次のレイアウトを生成する必要があります。他の方法がない場合は、最も外側のコンテナ（0）の任意の要素の幅を設定できません。

最も外側のコンテナ（0）は、ページレイアウトの他の部分のサイズです。同じ構造のいくつかの項目（1）を含んでいます。コンテナ（1）には小さなコンテンツ（2）が含まれています - 実際は数字です。それを章番号と考えてください。この番号の右側には、いくつかの部分（3）〜（6）で構成された実際の内容のコンテナ（3）があります。コンテンツアイテム（4）〜（6）のすべてが常に存在するわけではない。現在のコンテンツアイテムは、最初の現在のコンテンツアイテムが番号（2）の右側になるようにコンテナ（3）の上部に移動する。コンテンツ項目（4）〜（6）には、ムスクが巻き付く長いテキストが含まれている場合があります。

最後に、この全体構造は3回ネストされます。コンテナ（6）はコンテナ（1）と同じ構造を持ちます。最も深いネストレベルのコンテナ（3）には、水平にスクロール可能な非常に広いテーブルが含まれています。

___________________________________ 
|0 _______________________________ | 
| |1 _____ ___________________ | | 
| | |2 | |3 _______________ | | | 
| | |_____| | |4    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |5    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |6    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |_______________| | | | 
| |   |___________________| | | 
| |_______________________________| | 
|     .     | 
|     .     | 
|     .     | 
| _______________________________ | 
| |1 _____ ___________________ | | 
| | |2 | |3 _______________ | | | 
| | |_____| | |4    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |5    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |6    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |_______________| | | | 
| |   |___________________| | | 
| |_______________________________| | 
|___________________________________| 

これまでのところ私はdivを使用

• レイアウトを試みたが、位置に失敗した（2）及びレイアウトdivを使用してフローティング左
• 側（3）側（2）及び（ DIVを使用し、浮動小数点（2）および浮動小数点（3）を使用してレイアウトする場合、（3）が（3）の内容が（2）または（3）の周りを浮動小数点以下（3）の内容が狭い場合には、（2）と（3）との間のギャップは任意に広くなることがある。
• 2つの列（1つは（2）、もう1つは（3））を持つネストした表を使用してレイアウトを行いますが、表の幅をコンテナ（0）に制限できませんでした。最も深いネスティングレベルの非常に幅の広いテーブルは、すべてのセルとテーブルを右に押すだけです。このCSS 2.1 12.4.1で説明したが、これは（内部の数字を置くよう
• 迅速ので、テーブルの表示スタイルを持つdiv要素に基づいていますが、ブラウザのサポートが貧弱にしたレイアウトは、順序付けられたリストを使用してレイアウトをこのアイデア
• をあきらめました3）。さらに、私の数字が連続していることは保証されていません（ただし、カウンタを明示的に設定することで修正できます）。

最後の結果は次のようになります。

1 Section Header 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus 
    tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae 
    justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus. 

    1.1 Question Header 

     Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae 
     arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie. 
     Donec ut fermentum ligula. 

     1.1.1 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo 
      orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non 
      rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus 
      neque mattis risus. 
      ________________________________________________________________ 
      |   |   |   |   |   | | 
      | Header | Header | Header | Header | Header | Hea| 
      |___________|___________|___________|___________|___________|____|     
      |   |   |   |   |   | | 
      |   |   |   |   |   | | 
      |___________|___________|___________|___________|___________|____| 
      |   |   |   |   |   | | 
      |   |   |   |   |   | | 
      |___________|___________|___________|___________|___________|____| 
       ____________________________________________________________ 
      |<|____________________________________________________________|>| 

     1.1.2 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo 
      orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non 
      rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus 
      neque mattis risus. 

2 Section Header 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus 
    tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae 
    justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus. 

    2.1 Question Header 

     Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae 
     arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie. 
     Donec ut fermentum ligula. 

大量の数字は、コンテンツをさらに右側に押し込んでも問題ありません。

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

でも、コンテンツの整列も問題ありません。これは、ネストした表ではなく、1つの複雑な表を使用して達成するのは非常に簡単です。

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

その後の数字はまた、右整列することができますが、私はおそらくより良い整列ルックスを残したと思う - 数字の長さはそれほど変化しません。

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

したがって、問題の本質は、要素（2）と（3）を並置してコンテンツのサイズに合わせることです。何か案は？ DIVとDIVよりもネストされた順序付きリストを使用する意味的な正しい解は、テーブルよりもやや好まれます。

Answer 1

これはあなたのためのトリックですか？

CSS

div { 
    border: #000 solid 1px; 
    padding: 2px; 
    min-height: 20px; 
    min-width: 12px; 
    position: relative; 
} 

HTML

<div style="width:300px;"> 
    <div> 
     <div style="position:absolute;"></div> 
     <div style="margin-left:20px;"> 
      <div></div> 
      <div></div> 
      <div> 
       <div style="position:absolute;"></div> 
       <div style="margin-left:20px;"> 
        <div></div> 
        <div></div> 
        <div> 
         <div style="position:absolute;"></div> 
         <div style="margin-left:20px;"> 
          <div></div> 
          <div></div> 
          <div></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

あなたは、これは非常に迅速にhttp://jsfiddle.net/nemophrost/Zrabg/

Answer 2

ステップ1は良いdoctypeを選択することになります。 HTML Strictは、正しく使用された場合には素晴らしいものです。

ステップ2は、リセットスタイルシートを使用するか、ディスプレイにブラウザコンプライアンスの最後のビットを取得するようにdiv設定を明示的に設定することになります。

ステップ3は、Divsとテーブルの組み合わせが必要になることです。あなたはそのパスを開始しましたが、テーブルはDoctypeの問題のために制約されていませんでした。再試行する。これは、アイテム3が幅を超えている場合、アイテム2が2より下に落ちないようにする唯一の方法です。