html - 如何并排放置两个内容大小的 HTML 元素？

Question

我必须为网站生成以下布局，其中所有元素的大小均按其内容确定。我无法设置任何元素的宽度 - 如果没有其他方法，可能是最外层容器 (0) 的宽度。

最外面的容器 (0) 由页面布局的其他部分调整大小。它包含几个具有相同结构的元素 (1)。容器 (1) 包含一些小内容 (2) - 实际上它只是一个数字；将其视为章节编号。在这个数字的右边是容器 (3)，其实际内容由 (3) 到 (6) 的几个部分组成。并非所有内容项 (4) 至 (6) 始终存在；当前内容项移动到容器 (3) 的顶部，以便第一个当前内容项位于数字 (2) 的右边。内容项 (4) 到 (6) 可能包含必须环绕的长文本。

最后，整个结构嵌套了 3 次——容器 (6) 与容器 (1) 具有相同的结构。在最深的嵌套级别容器 (3) 中包含一个可能非常宽的表格，该表格必须可以水平滚动。

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

到目前为止我已经尝试过了

• 使用 DIV 但未能将 (2) 和 (3) 并排放置的布局
• 使用 DIV 并向左浮动 (2) 和 (3) 的布局，但如果 (3) 变宽，则 (3) 的内容 float 在 (2) 周围或 (3) 移动到 (2) 下方
• 使用 DIV 和向左浮动 (2) 和向右浮动 (3) 的布局，但如果 (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/ 快速查看它的作用。