我必须为网站生成以下布局，其中所有元素的大小均由其内容决定。我无法设置任何元素的宽度 - 如果没有其他方法，可能是最外层的容器(0)。如何并排放置两个内容大小的HTML元素？
最外面的容器(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优先于表格。
+0
你真的应该看到这是非常有用的技巧：绝对定位里面相对定位：HTTP： //css-/absolute-positioning-inside-relative-positioning/ –
-11-23 18:05:40
+0
我希望你能够支付这个答案的人。另外，不要忘记存在内联块。 –
-11-23 18:06:08
+0
@Sarfraz查看我的评论nemophrost答案 - 定位元素(几乎)总是需要一些关于元素大小的假设。这正是我想要避免的;我只想按内容确定元素的大小。 –
-11-23 19:34:07
