#javascript #css #html
#javascript #css #HTML
Вопрос:
спасибо за ваш интерес, во-первых, я считаю, что изображение стоит тысячи слов, так что поехали 
К сожалению, у меня сейчас нет мыши, поэтому она нарисована с помощью IBM TrackPoint, но основная идея должна быть ясна. Я назвал это горизонтальным деревом, потому что обычно древовидное представление является вертикальным, вы увидите только один каталог в одной строке, а в левой части имени каталога будут просто вертикальные линии, показывающие, насколько глубоко вложен этот каталог. Я пытаюсь, чтобы «каталоги» были перечислены рядом друг с другом.
Представьте это как диаграмму алгоритма с IFS и ENDIFs, и у них всегда будет ровно два выхода или ввода.
Сейчас я пытаюсь создать это с помощью базовых элементов HTML и CSS, и сначала я думал, что это будет проще простого, но это не так, я потратил на это целый день, но безуспешно. Оно будет сгенерировано JS динамически, поэтому я стараюсь избегать таблиц. У меня может быть любое количество IFS, будет точно такое же количество ENDIFs. Там будет любое количество других базовых ячеек. Вся структура начинается с одной ячейки и заканчивается одной ячейкой
Вот html, который должен генерировать похожее изображение:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFs and ENDIFs</title>
<style>
ul, li, div{
margin: 0px;
padding: 0px;
border: 0px;
}
ul.left{
border: 1px solid red;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
ul.right{
border: 1px solid green;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
}
li.parent{
border: 1px solid blue;
background-color:#CC9;
margin: 2px;
padding: 2px;
min-width: 350px;
display:block;
overflow-style:marquee-block;
}
</style>
</head>
<body>
<div id="root">
<ul>
<li class="parent">
<div class="label">1</div>
<ul class="left">
<li>
<div class="label">1.L1</div>
</li>
<li>
<div class="label">1.L2</div>
</li>
<li class="parent">
<div class="label">1.L3</div>
<ul class="left">
<li>
<div class="label">1.L3.L1</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.L3.R1</div>
</li>
<li>
<div class="label">1.L3.R2</div>
</li>
</ul>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R1</div>
</li>
<li>
<div class="label">1.R2</div>
</li>
<li class="parent">
<div class="label">1.R3</div>
<ul class="left">
<li>
<div class="label">1.R3.L1</div>
</li>
<li>
<div class="label">1.R3.L2</div>
</li>
<li>
<div class="label">1.R3.L3</div>
</li>
<li>
<div class="label">1.R3.L4</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R3.R1</div>
</li>
<li>
<div class="label">1.R3.R2</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="label">2</div>
</li>
<li>
<div class="label">3</div>
</li>
</ul>
</div>
</body>
</html>
Вот как это выглядит на данный момент: ( (ничего похожего на результат, на который я надеюсь, также это, вероятно, 7-я итерация моих попыток разобраться в этом) Так что, если бы кто-нибудь мог указать мне правильное направление, я был бы очень признателен.
Комментарии:
1. Попробуйте нанять кого-нибудь. Похоже, что вы после того, как кто-то сделал это за вас. С чем именно вам нужна помощь? С какой частью у вас проблемы. Логика Javascript? Стиль?
2. МОЙ плохой, я борюсь с перемещением элементов рядом друг с другом на случай, если они являются дочерними. Как и в моем примере внизу, мне удалось расположить дочерние элементы «1.L» и «1.R» родительского элемента «1» рядом друг с другом, но мне не повезло с теми, что глубже. Но спасибо, что посоветовали мне нанять кого-нибудь. Я пытаюсь что-то сделать для себя, я не зарабатываю деньги, также я хочу выяснить, где я совершаю ошибку. После 14 часов, проведенных на моем ноутбуке (первые 12 часов потрачены на то, что работает :)), я, возможно, упускаю из виду некоторые базовые вещи. В любом случае, разве этот сайт не основан на помощи друг другу?
3. Это не дерево. Это циклический график.
4. Это сделает это за вас. просто скачайте и используйте его: http://www.codeproject.com/KB/scripting/Horizontal_JS_Tree.aspx
5. @mehaase — Спасибо! Мне было интересно, как правильно называется эта структура. Теперь я могу поискать дополнительную информацию об этом.
Ответ №1:
HTML — линейная структура данных, но ваш график, который вы пытаетесь воссоздать, не является линейным. Хотя это возможно, это не обязательно тривиально.
Вам следует избегать использования float, потому что вложенные float-файлы немного сложны в управлении. inline-block здесь, вероятно, лучшее решение, однако поддержка слабовата в старых браузерах.
Взгляните на пример, который я сделал, может быть, вы сможете развить его: http://jsfiddle.net/uf5uM /
Комментарии:
1. Большое вам спасибо! Я почти сдался и начал думать о другом способе достижения цели, но ваше решение кажется надежным.
2. Нет, серьезно, мне пришлось вернуться, чтобы поблагодарить вас еще раз, я не могу поверить, что я не пробовал встроенные блоки. В нем так редко используется свойство display, что я даже не думаю об этом. Теперь мне просто нужно убедиться, что между ними нет пробелов, и все готово 🙂 Еще раз спасибо, ты молодец.