Бок о бок Divs с динамическим контентом

Question

Я динамически генерирую схему, создавая панель и метки в ASP.NET. Каждый узел в контуре имеет номер контура и контурный текст, который поступает из базы данных, определяющей узлы в структуре дочерних/родительских структур, для определения дерева контуров. Для каждой записи в контуре я хотел бы, чтобы левый div содержал номер схемы, а правый div содержал текст схемы.

Левый div должен иметь определенную минимальную ширину, равную 50px, и должен быть шире, если необходимо, чтобы соответствовать большим номерам контуров, потому что иногда количество линий может быть «Раздел VI.». Или, альтернативно, все разделительные числа должны быть шириной самой большой ширины, необходимой для поддержки наибольшего номера контуров.

Правый 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, я могу эмулировать, учитывая, что вы считаете, что контент управляется базой данных и, следовательно, не имеет заданной ширины.

Если вы думаете, что я должен просто сделать это, создав таблицу из двух столбцов для каждой записи, тогда я был бы рад узнать ваше мнение.

Edit: Это один подход, который я попробовал несколько различных способов:

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

Если число очертание было слишком долго было бы завернуть, или он будет перекрывать другой DIV, в зависимости от того, как я отлажены Это. Вместо этого я бы хотел, чтобы левый столбец расширялся, чтобы соответствовать содержимому. Я не мог найти способ подстроить его, чтобы разместить это. В этих особых случаях не обязательно, чтобы все номера линий совпадали. Если oddball имеет слегка отличающийся отступ, потому что количество контуров слишком велико, все в порядке. До тех пор, пока номер контура не обертывает или не перекрывает другой текст.

Редактирование 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

В подобной ситуации я бы действительно разорвал дивизии.

Go с вложенными < дл > «ы

<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 в (названия) влево, и позволить д.Д. плавать вправо, но должен держать ваш dt плавающим справа от других 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> 

Итак, я добавил немного стиля к <dt>, чтобы облегчить его чтение. Но важная часть - отсутствие запаса и запаса на < дд >, а также overflow: hidden. Граница 0 предотвращает странности при малых размерах контейнера, а overflow: hidden предотвращает обертку <dd> с текстом от <dt>.

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