Как правильно манипулировать дивами, чтобы создать дерево с ветвями?

ProgramBox

Как правильно манипулировать дивами, чтобы создать дерево с ветвями?

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Меня попросили создать дерево (например, растение) для проекта, чтобы отобразить результаты викторины. Мне нужны ветви с обеих сторон, 4 основные ветви, от которых отходят 5 других ветвей, а также листья и потенциально плоды, но я, похоже, не могу реализовать аспект фруктов. Im возникли проблемы размещения моего ДИВС и понять, как управлять им для нужного вывода.
Вот что я имею до сих пор, но я хотел бы поставить два отделения на другой стороне дерева, а также сможете степени более ДИВС из этих филиала, как меня попросили, чтобы добавить больше власти, чтобы выглядеть более как дерево.

 <div class=tree-container>
  
  <figure class="result-tree">
    <div data-toggle="tooltip" data-placement="top" title="Cognitive" class="cat-branch-r" style="width: 150px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
    </div>
    <div data-toggle="tooltip" data-placement="top" title="Physical" class="cat-branch-r" style="width: 200px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
    </div>
    <div data-toggle="tooltip" data-placement="top" title="Social Emotional" class="cat-branch-r" style="width: 180px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
    </div>
    <div data-toggle="tooltip" data-placement="top" title="Spiritual" class="cat-branch-r" style="width: 130px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
      </figure>
    </div>

Я пытался создать css для «.дерево результатов .cat-ветвь-l» и изменить 2-й и 4-й классы ветвей на класс cat-ветвь-l, но я никогда не мог заставить его перейти в левую часть div. Я понимаю, что это не может быть сделано так, как я пытался, однако я не знаю, как я могу это сделать … Ниже приведено изображение того, что я пытался создать, любая помощь или совет были бы великолепны!

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

     .tree-container {
        display: flex;
        margin-top: 40px;
        margin-left: 40px;
        justify-content: space-around;
    }

    .result-tree {
        width: 35px;
        height: 500px;
        background-color: saddlebrown;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 40px;
    }

    .result-tree .cat-branch-r {
        height: 25px;
        background-color: peru;
        border-radius: 10px;
        display: flex;
        justify-content: flex-end;
        transform: rotate(-30deg);
    }

    .result-tree .cat-branch-l {
        height: 25px;
        background-color: peru;
        border-radius: 10px;
        margin-right: 20px;
        justify-content: left;
        transform: rotate(-130deg);
    }

    .result-tree .cat-branch-r .leaf {
        width: 40px;
        height: 40px;
        background-color: green;
        border-radius: 100% 0 100% 0;
        transform: translateY(-100%);
    }

    .result-tree .cat-branch-r:hover {
        height: 25px;
        background-color: rgb(214, 189, 164);
        border-radius: 10px;
        display: flex;
        justify-content: flex-end;
        transform: rotate(-30deg);
    }

    .result-tree .cat-branch-r .leaf:hover {
        width: 40px;
        height: 40px;
        background-color: rgb(42, 173, 42);
        border-radius: 100% 0 100% 0;
        transform: translateY(-100%);
    }

1. Не могли бы вы немного подробнее описать, каким должен быть плод — это «дитя» листа или он находится на том же уровне, что и лист?

2. Я бы сказал, что это тот же уровень, что и у листа, вы должны навести на них курсор, и они дают больше информации, основанной на результатах викторины, я думаю, мне нужно сделать форму яблока/апельсина и как-то повесить ее. Мне сказали сосредоточиться на ветвях и листьях, если я не смогу сделать фрукты. @Ахаворт

Ответ №1:

Проблема в том, что ваше «дерево» имеет display: flex и flex-direction: column . Это означает, что все дочерние элементы дерева будут отображаться в одном столбце-в вашем случае ветви справа.

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

 <div class="tree">
  <div class="branches"> left branches </div>
  <div class="branches"> right branches </div>
</div>

Однако «дерево» теперь нуждается в обновлении CSS. Он может продолжать использовать гибкую компоновку, но она должна быть flex-direction: row такой, чтобы дочерние элементы располагались горизонтально. И тогда новые branches дивы должны использовать гибкую компоновку и иметь flex-direction: column .

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

В приведенном ниже фрагменте кода создайте два раздела «ветви», как я описал выше, и переместите свою «левую» ветвь в набор ветвей, которые будут отображаться с левой стороны. Я вроде как догадался, как вы хотели, чтобы листья были ориентированы (я также плохо разбираюсь в преобразованиях, поэтому корректирую их по мере необходимости), и я не стал утруждать себя реализацией логики «наведения», потому что это было в первую очередь связано с размещением ветвей.

 .tree-container {
  display: flex;
  margin-top: 40px;
  margin-left: 40px;
  justify-content: space-around;
}

.result-tree {
  width: 35px;
  height: 500px;
  background-color: saddlebrown;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-bottom: 40px;
}

.branches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-bottom: 40px;
}

.branch {
  height: 25px;
  background-color: peru;
  border-radius: 10px;
  display: flex;
}

.result-tree .cat-branch-r {
  display: flex;
  justify-content: flex-end;
  transform: rotate(-30deg);
}

.result-tree .cat-branch-l {
  margin-left: 40px;
  margin-right: -30px;
  justify-content: flex-end;
  /*justify-content: left;*/
  transform: rotate(-130deg);
}

.result-tree .cat-branch-r .leaf {
  width: 40px;
  height: 40px;
  background-color: green;
  border-radius: 100% 0 100% 0;
  transform: translateY(-100%);
}

.result-tree .cat-branch-l .leaf {
  width: 40px;
  height: 40px;
  background-color: green;
  border-radius: 100% 0 100% 0;
  transform: translateY(50%) rotate(90deg);
}

.result-tree .cat-branch-r:hover {
  height: 25px;
  background-color: rgb(214, 189, 164);
  border-radius: 10px;
  display: flex;
  justify-content: flex-end;
  transform: rotate(-30deg);
}

.result-tree .cat-branch-r .leaf:hover {
  width: 40px;
  height: 40px;
  background-color: rgb(42, 173, 42);
  border-radius: 100% 0 100% 0;
  transform: translateY(-100%);
}

 <div class=tree-container>

  <figure class="result-tree">
    <div class="branches branches-l">
      <div data-toggle="tooltip" data-placement="top" title="Grab Bag" class="branch cat-branch-l" style="width: 180px">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
      </div>
    </div>
    <div class="branches branches-r">
      <div data-toggle="tooltip" data-placement="top" title="Cognitive" class="branch cat-branch-r" style="width: 150px">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
      </div>
      <div data-toggle="tooltip" data-placement="top" title="Physical" class="branch cat-branch-r" style="width: 200px">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
      </div>
      <div data-toggle="tooltip" data-placement="top" title="Social Emotional" class="branch cat-branch-r" style="width: 180px">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
      </div>
      <div data-toggle="tooltip" data-placement="top" title="Spiritual" class="branch cat-branch-r" style="width: 130px">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
      </div>
    </div>
  </figure>

Теперь вы спросили, как «правильно» это сделать, и, честно говоря, я бы вообще не пошел по этому пути. Я действительно впечатлен тем, что вы придумали, но это недоступно и не масштабируется. Я не совсем уверен, как бы я это сделал, не сидя и не думая о вариантах использования, но это было бы не так.

Ответ №2:

Я запутался, пытаясь использовать flex, потому что у вас есть вложенная структура (фактическая древовидная структура), и базовый HTML хорош в этом, так что вот альтернативный подход.

Ваш вопрос требует «правильного» подхода, и я бы не сказал, что какой — либо один подход является правильным или нет-если он работает. Однако это может помочь.

Что делает этот фрагмент, так это определяет все измерения в терминах одного заданного измерения — высоты ствола дерева. Это может быть изменено по мере необходимости, но если он использует какое-либо устройство относительно окна просмотра, то он будет реагировать без каких-либо дополнительных действий. В этом фрагменте используется vmin.

Размеры и цвет каждого элемента определяются в переменных CSS.

Затем требуется упрощенный подход к позиционированию. Веточки вложены в элементы ветвей, которые находятся внутри элемента ствола. Вы можете добавить листья/фрукты, которые будут вложены в элементы ветки.

Альтернативные дочерние элементы затем размещаются по обе стороны от их родительского элемента, так что вы получаете каждую вторую ветвь слева от ствола. Этот метод также можно использовать для веток и, в конечном счете, листьев/фруктов, чтобы распределить вещи. И в качестве дополнительного штриха последнюю дочернюю веточку и листик в каждом элементе можно установить в конце, чтобы все лучше соответствовало вашему рисунку.

Я не выполнил все CSS, необходимые для заключительного этапа (при необходимости поворачивая все ветки, добавляя фрукты/листья слева и справа от их веток), поэтому это просто для того, чтобы ответить на ваш главный вопрос изначально — как разместить ветви по обе стороны ствола (и вместе с ними ветки). Если вы решите не использовать промежуточные веточки, замените их фруктами/листьями, оставив эту дополнительную стадию гнездования.

 <style>
.tree {
  --trunkH: 80vmin; /* all other dimensions are calculated in relation to this height */

  --treeH: calc( var(--trunkH) * 100 / 80); /* top 20% is for rotated branches */
  --treeW: var(--treeH);
  --treeC: lightblue;
   
  --trunkW: calc(var(--trunkH) / 12); 
  --trunkC: #8b4513;
  
  --branchW: calc(var(--treeW) / 2);
  --branchW: calc(var(--trunkW) * 5);
  --branchH: calc(var(--trunkH) / 16);
  --branchC: #cd853f;
  
  --twigW: calc(var(--branchH) / 10);
  --twigH: calc(var(--branchW) / 10);
  --twigH: calc(var(--branchH) * 1);
  --twigC: gray;
  
  --leafW: var(--twigH);
  --leafH: calc(var(--leafW) * 2);
  --leafC: green;
  
  --fruitW: var(--twigH);
  --fruitH: var(--fruitW);
  --appleC: red;
  --orangeC: orange;
}

.tree {
  position: relative;
  width: var(--treeW);
  height: var(--treeH);
  background-color: var(--treeC);
  margin: 0;
  overflow: visible;
}

.tree * {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.trunk {
  width: var(--trunkW);
  height: var(--trunkH);
  background-color: var(--trunkC);
  top: 20%;
  left: calc(50% - (var(--trunkW) / 2));
  border-radius: 2vmin 2vmin 0 0;
}

.branch {
  width: var(--branchW);
  height: var(--branchH);
  background-color: var(--branchC);
  top: calc(var(--n) * 2 * var(--branchH));
  border-radius: 2vmin;
  }
  
.branch:nth-child(odd) {
  left: calc(var(--trunkW) / 2);
  transform: rotate(-30deg);
  transform-origin: 0 50%;
}
.branch:nth-child(even) {
  right: calc(var(--trunkW) / 2);
  transform: rotate(30deg);
  transform-origin: 100% 50%;
}

.twig {
  width: var(--twigW);
  height: var(--twigH);
  background-color: var(--twigC);
}

.branch:nth-child(odd) .twig {
  right: calc(var(--n) * var(--branchW) / 16);
}

.branch:nth-child(odd) .twig:nth-child(odd) {
  top: calc(-1 * var(--twigH));
  transform-origin: 100% 100%;
  transform: rotate(60deg);
}

.branch:nth-child(odd) .twig:nth-child(even) {
  top: var(--branchH);
}

.branch:nth-child(odd) .twig:last-child {
  left: 100%;
  top: calc(var(--branchH) / 2);
  transform: rotate(-90deg);
  transform-origin: 50% 0;
}

/* twigs on the left hand branches */

.branch:nth-child(even) .twig {
  left: calc(var(--n) * var(--branchW) / 16);
}

.branch:nth-child(even) .twig:nth-child(odd) {
  top: calc(-1 * var(--twigH));
}

.branch:nth-child(even) .twig:nth-child(even) {
  top: var(--branchH);
}

.branch:nth-child(even) .twig:last-child {
  left: 0;
  top: calc(var(--branchH) / 2);
  transform: rotate(90deg);
  transform-origin: 50% 0;
}
/* 
.apple, .orange {
  width: var(--fruitW);
  height: var(--fruitW);
  border-radius: 50%;
}
.apple {
  background-color: var(--appleC);
}

.orange {
  background-color: var(--orangeC);
}
*/

.tree *:nth-child(1) { --n: 1; }
.tree *:nth-child(2) { --n: 2; }
.tree *:nth-child(3) { --n: 3; }
.tree *:nth-child(4) { --n: 4; }
.tree *:nth-child(5) { --n: 5; }
.tree *:nth-child(6) { --n: 6; }
.tree *:nth-child(7) { --n: 7; }
.tree *:nth-child(8) { --n: 8; }

</style>
<body>
  <div class="tree">
    <div class="trunk">
      <div class="branch">
        <div class="twig">
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
        </div>
      </div>
      <div class="branch">
        <div class="twig">
          <div class="leaf"></div>
          <div class="apple"></div>
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
        </div>
      </div>
      <div class="branch">
        <div class="twig">      
          <div class="leaf"></div>
        </div>
        <div class="twig">      
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
        </div>
      </div>
      <div class="branch">
        <div class="twig">
          <div class="leaf"></div>
          <div class="leaf"></div>
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
          <div class="leaf"></div>
        </div>
        <div class="twig">
          <div class="leaf"></div>
          <div class="leaf"></div>
        </div>
      </div>
    </div>
  </div>
</body>

Вот простой начальный фрагмент — это

Метки: Как правильно манипулировать дивами, чтобы создать дерево с ветвями?

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Ошибка Fullfillment_created_at ror3 shopify api

SpringBootTest не может быть преобразован в тип

Как правильно сохранить файл изображения в каталог?