Question

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

左边的div应该是一些特定的最小宽度，比如50px，并且如果需要则应该更宽以适合更大的轮廓数，因为偶尔轮廓数可能是“第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类，最后这两个被填充到一个面板中根据缩进动态设置左边距。几乎任何你可以在我的html标记中显示我可以模拟的div，因为你认为内容是数据库驱动的，因此没有预定的宽度。

如果您认为我应该通过为每个条目创建一个两列表来执行此操作，那么我很高兴在此发表您的意见。

编辑：这是我尝试过几种不同方法的一种方法：

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。

使用嵌套＆lt; dl＆gt;的

<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's向右浮动，但是应该让你的dt不会浮动到其他dt的右边，让它们分开。

<强>附录：

我已经重新审视了这一点，虽然我没有看到你所获得的重叠，但我在CSS中添加了一些内容以显示＆lt; dl＆gt;

的多功能性

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>

所以，我为＆lt; dt＆gt;添加了一些风格，只是为了让它更容易阅读。但重要的部分是＆lt; dd＆gt;以及overflow: hidden缺少边距和填充。 0边距和填充可防止小容器尺寸出现奇怪现象，overflow: hidden可防止＆lt; dd＆gt;包装在＆lt; dt＆gt;下的文字。

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

与动态内容并排的Divs

1 个答案: