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）的布局，但如果（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步将是选择一个好的doctype。正确使用HTML Strict非常棒。

步骤2将要么使用重置样式表，要么显式设置div设置，以便在显示器上获得最后一点浏览器合规性。

第3步是你需要Div和表的组合。您开始沿着这条路走下去，但由于doctype问题，表格不受限制。再试一次。如果超过分配的宽度，这可能是让第3项不会低于2的唯一方法。

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

2 个答案: