如何並排放置兩個內容大小的HTML元素？

Question

我必須爲網站生成以下佈局，其中所有元素的大小均由其內容決定。我無法設置任何元素的寬度 - 如果沒有其他方法，可能是最外層的容器（0）。

最外面的容器（0）由頁面佈局的其他部分調整大小。它包含幾個結構相同的項目（1）。容器（1）包含一些小內容（2） - 實際上它只是一個數字;把它想成章節號。在這個數字的右邊有容器（3），其實際內容由幾個部分（3）到（6）組成。並非所有內容項目（4）至（6）總是存在;當前內容項目移動到容器（3）的頂部，使得第一當前內容項目在數字（2）的右側。內容項目（4）到（6）可能包含可能纏繞的長文本。

最後，這整個結構嵌套三次 - 容器（6）具有與容器（1）相同的結構。在最深的嵌套層次中，容器（3）包含一個可能非常寬的表格，該表格必須是可水平滾動的。

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

到目前爲止我試圖

• 使用的DIV的佈局，但未能位置（2）和（3）並排
• 的佈局使用的DIV和浮動左（2）和（ 3），但是如果（3）變寬，則（3）的內容在（2）或（3）周圍浮動移動到（2）以下
• 使用DIV和左浮動（2）和右浮動），但如果（3）的內容較窄，則（2）和（3）之間的間隔可變得任意寬。
• 使用兩列嵌套表的佈局 - 一個用於（2）和一個用於（3） - 但未能將表寬度限制爲容器（0）。最深嵌套層次中的非常寬的表格將所有單元格和表格推向右側。
• 基於與表的顯示樣式，但瀏覽器的支持是很差的DIV佈局所以很快放棄了這個想法
• 使用如本CSS 2.1 12.4.1描述，但這種狀況會在數字裏面有序列表佈局（ 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 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步是要選擇一個好的文檔類型。如果使用正確，HTML Strict就非常棒。

第2步將要使用重置樣式表或明確設置div設置，以便您在顯示器上獲得瀏覽器合規性的最後一點。第3步是你需要Div和表的組合。你開始走下去，但由於文檔類型問題，表格並未受到最大限制。再試一次。如果物品3超過分配的寬度，這可能是保持物品3不到2的唯一方法。