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

我必须为网站生成以下布局，其中所有元素的大小均由其内容决定。我无法设置任何元素的宽度 - 如果没有其他方法，可能是最外层的容器（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优先于表格。

来源

2010-11-23 Daniel Brückner

你真的应该看到这是非常有用的技巧：绝对定位里面相对定位：HTTP： //css-tricks.com/absolute-positioning-inside-relative-positioning/ – Sarfraz 2010-11-23 18:05:40

我希望你能够支付这个答案的人。另外，不要忘记存在内联块。 – 2010-11-23 18:06:08

@Sarfraz查看我的评论nemophrost答案 - 定位元素（几乎）总是需要一些关于元素大小的假设。这正是我想要避免的;我只想按内容确定元素的大小。 – 2010-11-23 19:34:07

这是否对你有用？

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/

来源

2010-11-23 18:55:52 nemophrost

第1步是要选择一个好的文档类型。如果使用正确，HTML Strict就非常棒。

第2步将要使用重置样式表或明确设置div设置，以便您在显示器上获得浏览器合规性的最后一点。第3步是你需要Div和表的组合。你开始走下去，但由于文档类型问题，表格并未受到最大限制。再试一次。如果物品3超过分配的宽度，这可能是保持物品3不到2的唯一方法。

来源

2010-11-23 18:11:22 NotMe

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

回答

相关问题