1

структура



В общем, есть такая структура. Как правильно сделать в коде эти линии чтобы при изменение разрешения они не плавали (горизонтальные линии)? На данный момент горизонтальные линии сделал nth-child к блокам с логотипом. Как только меняю разрешение, то получается каша.

2
  • 2
    svg ююзай и не парся 19 дек 2016 в 11:13
  • еще можно сделать блоки с border-style:dotted; и их расположить нужным образом.
    – Mikl
    19 дек 2016 в 14:35

1 ответ 1

0

Можно сделать через border-style: dotted. Разбиваем дерево на две половины. Добавляем секции с левой и правой сторон (устанавливая им одинаковую высоту). Отрезки делаем из блока с нулевой высотой. Результат:

* {
  box-sizing: border-box;
}

.tree__structure {
  display: flex;
}

.tree__half {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.tree__half--left {
  border-right: 2px dotted gray;
  align-items: flex-end;
}

.tree__half--right {
  align-items: flex-start;
}

.tree__root-section {
  width: 150px;
  height: 100px;
  margin: 0 auto;
  background-color: gray;
  border-radius: 20px;
}

.tree__section {
  display: flex;
  align-items: center;
  height: 180px;
}

.tree__text-item {
  width: 150px;
  text-align: justify;
}

.tree__text-item--special {
  padding: 10px;
  border-radius: 20px;
  background-color: #ccc;
}

.tree__text-item--left {
  margin-right: 30px;
}

.tree__text-item--right {
  margin-left: 30px;
}
.tree__dots {
  width: 100px;
  height: 0;
  border-bottom: 2px dotted gray;
}

.tree__dots + .tree__image-item {
  margin-left: 30px;
}

.tree__image-item + .tree__dots {
  margin-left: 30px;
}

.tree__dots--left {
  margin-right: 2px;
}

.tree__dots--right {
  margin-left: 2px;
}
<div class="tree">
  <div class="tree__root">
    <div class="tree__root-section">
    </div>
  </div>
  <div class="tree__structure">
    <div class="tree__half tree__half--left">
      <div class="tree__section">
        <div class="tree__text-item tree__text-item--left">
          This is some text on the left side.
        </div>
      </div>
      <div class="tree__section">
        <div class="tree__image-item">
          <img src="http://lorempixel.com/output/nature-q-c-100-100-6.jpg" />
        </div>

        <div class="tree__dots tree__dots--left">
        </div>
      </div>
    </div>

    <div class="tree__half tree__half--right">
      <div class="tree__section">
        <div class="tree__dots tree__dots--right">
        </div>

        <div class="tree__image-item">
          <img src="http://lorempixel.com/output/nature-q-c-100-100-8.jpg" />
        </div>
      </div>
      <div class="tree__section">
        <div class="tree__image-item">
          <div class="tree__text-item tree__text-item--special tree__text-item--right">
            This is some text on the right side. I will add some words for more content.
          </div>
        </div>
      </div>
    </div>
  </div>

7
  • Спасибо. Но как в таком случае поставить блок с текстом с обратной стороны от линии ? position только получается, но при нём блок остаётся неподвижным :(
    – Ivan A
    23 дек 2016 в 11:40
  • @IvanA Переделал решение для большей сопровождаемости. 23 дек 2016 в 13:13
  • Спасибо. Правда в safari каша получается :(
    – Ivan A
    23 дек 2016 в 13:57
  • @IvanA Посмотрите на поддержку flexobox caniuse.com/#feat=flexbox в Safari. Также возможно помогут вендорные префиксы для Safari. 23 дек 2016 в 14:00
  • @IvanA Кстати, тут flexbox использовать необязательно если что. Можно, к примеру, заменить разметку через float или inline-block. 23 дек 2016 в 14:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.