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

【问题标题】：How to place two content-sized HTML elements side by side?如何并排放置两个内容大小的 HTML 元素？
【发布时间】：2010-11-24 03:21:17
【问题描述】：

我必须为一个网站生成以下布局，其中所有元素都根据其内容调整大小。我无法设置任何元素的宽度 - 如果没有其他方法，可能是最外面的容器 (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 略优于表。

【问题讨论】：

你应该真正看到这个非常有用的技巧：绝对定位内部相对定位：css-tricks.com/absolute-positioning-inside-relative-positioning
我希望您正在使用贝宝支付回答此问题的人。另外，不要忘记存在 inline-block。
@Sarfraz 请参阅我对 nemophrost 答案的评论 - 定位元素（几乎）总是需要对元素的大小进行一些假设。这正是我要避免的；我只想按内容调整元素的大小。
@meder 我还没有真正考虑过内联块。我会试一试的。

标签： html css layout

【解决方案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/ 上快速查看它的作用

【讨论】：

如果找不到更好的解决方案，我打算使用此解决方案。问题是您必须对（2）的宽度做出假设。我想避免这种情况，因为所有数据都来自数据库，用户将有不同的显示分辨率和字体大小 - 所以有时（2）和（3）之间会有很大的差距，有时（2）会重叠（3 )。
就像你提到的那样，嵌套表可能最终成为要走的路，并为 (2) 的 css 设置 white-space:nowrap 以将其强制为正确的大小。

【解决方案2】：

第一步是选择一个好的文档类型。正确使用 HTML Strict 非常棒。

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

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

【讨论】：

DOCTYPE 真的会影响元素的渲染方式吗？我一直认为它只会在 CSS 标准中指定渲染逻辑时更改有效元素集。缺少 DOCTYPE 可能会触发切换到 quirks 模式，但我不希望在仅使用公共子集 (x)HTML 的情况下不同 DOCTYPES 之间存在任何呈现差异。你能提供任何参考吗？快速搜索未找到相关内容。
DIV 和表格组合的问题在于，DIV 的大小由容器决定，而表格的大小由内容决定——因此它们不能很好地嵌套。我阅读了 CSS 规范的相关部分，并且倾向于相信我观察到的大小调整行为（大部分）是符合标准的。
@Daniel：DOCTYPE 声明控制浏览器用户的渲染引擎以显示页面。每个浏览器都包含多个引擎，每个引擎都有不同的布局。唯一值得一提的（恕我直言）是 HTML 4.01 Strict。看：alistapart.com/articles/doctype
@Daniel：此外，DOCTYPE 声明控制填充和边距默认值等内容。其中，即使使用相同的 DOCTYPE 浏览器在一些功能（如 IMG 标签）上仍然略有不一致，这就是为什么重置样式表对于修复最后剩余的项目很重要。
这里是另一个关于这个主题的好网站：ericmeyeroncss.com/bonus/render-mode.html 是的，他们经常谈论 IE6，但它比以往任何时候都更重要的是添加了 chrome。