asp.net - 具有动态内容的并排 Div

Question

我通过在 ASP.NET 中创建面板和标签来动态生成大纲。大纲中的每个节点都有一个大纲编号和大纲文本，它们来自用于定义大纲树的子级/父级结构中的数据库定义节点。对于大纲中的每个条目，我希望左侧 div 包含大纲编号，右侧 div 包含大纲文本。

左边的 div 应该是一些特定的最小宽度，比如 50px，并且如果需要以适应更大的大纲编号应该变宽，因为偶尔大纲编号可能是“Section VI.”。或者，所有大纲编号 div 的宽度应为支持最大大纲编号所需的最大宽度。

如果容器或窗口的约束阻止文本全部出现在一行中，则右侧的 div 应该将文本换行。

*--------------Window or container----------------*
|Part I.    A small amount of outline text.       |
|   Section. I  A larger amount of text is here   |
|               showing text wrapping in its own  |
|               block.                            |
|Part II.   More text here with a little wrapping |
|           going on.                             |
|Part III.  A little bit more text.               |

我尝试了很多组合。我是 div 的新手，我找不到构建布局的好方法。似乎我发现的所有内容都非常特定于特定布局，并不能真正适应其他布局，或者它使用非常特定的 div 大小。

我是动态生成的，所以直到运行时我才知道那里有多少文本。因此，除非我要对字符串进行大量计算和测量，否则使用固定大小和绝对定位并不是真正可行的，我担心这会有多可靠。我担心我会在写完它后发现 .NET 所做的测量与浏览器实际呈现文本的方式之间的一致性。

这不是什么大问题或要求，但另外，固定大小会使调整外部容器或窗口的大小不允许文本填充新空间，或者当容器/窗口变小时，文本将没有适本地换行，而是创建一个滚动条。

现在我有一个包含标签的大纲编号面板，我为该面板分配了一个 Css 类，大纲文本位于一个单独的面板中，它有自己的 css 类，最后将两者塞入一个面板中具有基于缩进动态设置的左边距。只要您认为内容是数据库驱动的，因此没有预先确定的宽度，您可以用我可以模拟的 div 在 html 标记中显示任何内容。

如果您认为我应该通过为每个条目创建一个包含两列的表格来做到这一点，那么我很乐意在这里听取您的意见。

编辑:这是我尝试了几种不同方法的一种方法:

http://www.alistapart.com/articles/holygrail/

如果大纲编号太长，它会换行，或者会与另一个 div 重叠，这取决于我如何调整它。相反，我希望扩展左栏以适合内容。我找不到调整它以适应这种情况的方法。在这些特殊情况下，不需要所有大纲数字都匹配。如果由于大纲数字太长而使奇怪的缩进略有不同，那没关系。只要大纲编号不环绕或重叠其他文本即可。

编辑 2:我在测量字符串的过程中意识到的另一件事是，我的字体是由 *.css 文件定义的。所以在页面加载期间，我不确定如何确定将使用什么字体，因为这对于测量字符串的呈现宽度是必要的。

编辑 3:这是我尝试的最后一件事，但如果大纲编号太长，它会换行并与右侧的内容重叠。

<div id="container">  
  <div id="center" class="column">Application Information blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
  <div id="left" class="column">Part VVVVVVVVVVVV.</div>
</div>

#container {
  padding-left: 50px;   /* LC width */  
}

#center {
  width: 100%;  
  position: relative;
  float: left;
}

#left 
{
  position: relative;
  float: left;

  width: 50px;          /* LC width */
  right: 50px;          /* LC width */
  margin-left: -100%;
}

Answer 1

在这种情况下，我实际上会放弃 div。

使用嵌套的

<dl>
  <dt>Part I</dt>
  <dd>A small amount of outline text.
    <dl>
      <dt>Section I</dt>
      <dd> A larger amount of text is here
           showing text wrapping in its own
           block.</dd>
    </dl>
  </dd>
  <dt>Part II</dt>
  <dd>More text here with a little wrapping
       going on.</dd>
  <dt>Part III.</dt>
  <dd>A little bit more text.</dd>
</dl>

这将具有与您想要的相似的默认样式。要获得并排效果，您可能需要在 CSS 中添加:

dt { float: left; clear: left; }

这会将您的 dt(标题)推到左侧，并允许 dd 向右浮动，但应防止您的 dt float 到其他 dt 的右侧，使它们分开。

附录:

我已经重新审视过这个，虽然我没有看到你得到的重叠，但我已经在我的 CSS 中添加了一点来展示

的多功能性

CSS:

dt { float: left; clear: left; margin-right: 10px; font-weight: bold; }
dd { margin: 0; padding: 0; overflow: hidden; }

HTML:

<dl>
  <dt>Part I</dt>
  <dd>A small amount of outline text.
    <dl>
      <dt>Section I</dt>
      <dd> A larger amount of text is here
           showing text wrapping in its own
           block.</dd>
    </dl>
  </dd>
  <dt>Part II</dt>
  <dd>More text here with a little wrapping
       going on.</dd>
  <dt>Part III.</dt>
  <dd>A little bit more text.</dd>
</dl>

因此，我为

添加了一些样式，只是为了使其更易于阅读。但重要的是

上缺少边距和填充，以及 overflow: hidden。 0 margin 和 padding 防止在小容器尺寸下出现异常， overflow: hidden 防止

文本在

下换行。

Here is a jsFiddle so you can see the results immediately.