並排動態內容的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類在一個單獨的面板中，並且最後這兩個被塞入具有基於縮進動態設置左邊距的面板。幾乎任何事情，你可以顯示我的HTML標記與div我可以效仿，因爲你認爲內容是數據庫驅動，因此沒有一個預定的寬度。

如果你認爲我應該通過爲每個條目創建一個雙列表來做到這一點，那麼我很樂意在這裏看到你的意見。

編輯：這是一個方法，我嘗試了幾種不同的方法：

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

如果大綱數字太長會換行，否則會重疊其他分區，這取決於我如何微調它。相反，我想要左欄擴展以適應內容。我無法找到一種方法來調整它以適應這一點。在這些特殊情況下，並不要求所有大綱數字都匹配。如果因爲輪廓數太長而使古怪的縮進略有不同，那沒關係。只要大綱編號不包裹或重疊其他文本。

編輯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>的

<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不會漂移到其他dt的右邊，讓它們分開。

附錄：

我重新審視這一點，雖然我還沒有看到你得到的重疊，我添加了一點點我的CSS展現< DL的多功能性>

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> 

所以，我在<dt>的基礎上增加了一點風格，以方便閱讀。但重要的是<dd>以及overflow: hidden缺少保證金和填充。 0邊距和填充可防止在小容器尺寸下出現異常，並且overflow: hidden可防止<dd>文本纏繞在<dt>下。

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