Я генерирую схему динамически, создавая панель и метки в ASP.NET. Каждый узел в схеме имеет номер схемы и текст схемы, которые поступают из базы данных, определяющей узлы в структуре дочернего / родительского типа для определения дерева схемы. Для каждой записи в схеме я хотел бы, чтобы левый элемент содержал номер схемы, а правый элемент - текст структуры.
Левый 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%;
}