0

Так выглядит макет: ссылки расположены вертикально и слева.

Макет

А так выглядит мой вариант: с помощью каких свойств можно добиться результата как на макете?

Мой макет

Пытался использовать grid, но ничего не вышло. И почему ссылки выходят за пределы блока с фоном?

.main__central-wrapper {
  display: flex;
}

.main__left-link {
  transform: rotate(270deg);
}

.main__left-link a {
  color: #000;
}
<div class="main__central-wrapper">
  <div class="main__left-link">
    <a class="" href="">Instagram</a>
    <a class="" href="">Facebook</a>
    <a class="" href="">Youtube</a>
  </div>
  <div class="main__central">
    <div class="main__central__title">Дизайн проект для смарт квартир</div>
    <div class="main__central__text">Живи удобно и комфортно в своей новой квартире</div>
    <div class="main__central__btn">Заказать</div>
  </div>
</div>

2
  • Вам нужно добавить верхний марджин блоку .main__left-link, так как его изменило свойство transform
    – Samoedy
    16 апр 2021 в 11:45
  • @Samoedy, спасибо, получилось!
    – Sasha
    16 апр 2021 в 12:17

1 ответ 1

2

немного похожая проблема уже была поднята: Rotated elements in CSS that affect their parent's height correctly

также сдедал вот такую штуку:

.main__central-wrapper {
  display: flex;
  background-color: #cfe;
}

.main__left-link {
  /*transform: rotate(270deg);*/
  padding: 50% 0;
  height: 0;
}

.rot {
  display: flex;
  transform-origin: top left;
  transform: rotate(270deg) translate(-100%);
  margin-top: -50%;
}

.rot a {
  display: block;
  margin: 0 20px;
  padding: 10px;
  color: #000;
}
<div class="main__central-wrapper">
  <div class="">
    <div class="main__left-link">
      <div class="rot">
        <a class="" href="">Instagram</a>
        <a class="" href="">Facebook</a>
        <a class="" href="">Youtube</a>
      </div>
    </div>
  </div>
  <div class="main__central">
    <div class="main__central__title">Дизайн проект для смарт квартир</div>
    <div class="main__central__text">Живи удобно и комфортно в своей новой квартире</div>
    <div class="main__central__btn">Заказать</div>
  </div>
</div>

можно с помощью js решить

$('.main__central-wrapper').css('minHeight', +$('.main__left-link')[0].getBoundingClientRect().height + 'px')
.main__central-wrapper {
  display: flex;
  background-color: #cfe;
  padding: 20px;
}

.main__left-link {
  transform: rotate(270deg);
}

a {
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main__central-wrapper">
  <div class="main__left-link">
    <a class="" href="">Instagram</a>
    <a class="" href="">Facebook</a>
    <a class="" href="">Youtube</a>
  </div>
  <div class="main__central">
    <div class="main__central__title">Дизайн проект для смарт квартир</div>
    <div class="main__central__text">Живи удобно и комфортно в своей новой квартире</div>
    <div class="main__central__btn">Заказать</div>
  </div>
</div>

1
  • Хороший вариант, но я не вижу смысла использовать JS во втором примере, т.к. по требованиям автора вопроса там достаточно подобрать vh, будет даже лучше. Насчёт второго примера, смешиваете JS и JQ, есть возможность написать данный код без использования JS? (за ответ +)
    – De.Minov
    18 апр 2021 в 23:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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