0

Простите за глупый вопрос, но я не могу никак сделать так, чтобы иконки и текст появились сбоку. Я так понимаю, что мне нужно сначала задать размер одному блочному элементу и уже в нем все расставить как нужно, а уже потом другому блочному давать другие размеры и расставлять элементы уже имея размеры родителя. Не подскажите как правильно сделать?

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Open+Sans+Condensed:wght@300;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header class="header">
         <div class="rotate__inner">
            <div class="rotate__social-info">
                <h2 class="text">контактная информация</h2>
                <img class="rotate__img" src="/images/rotate__inst.png" alt="">
                <img class="rotate__img" src="/images/rotate__face.png" alt="">
                <img class="rotate__img" src="/images/rotate__vk.png" alt="">
                <img class="rotate__img" src="/images/rotate__youtube.png" alt="">
 -->
                <div class="container">
                    <div class="header__inner">
                        <nav class="menu">
                            <ul class="menu__list">
                                <li class="menu__item"><a class="menu__list-link" href="#">Главная</a></li>
                                <li class="menu__item"><a class="menu__list-link" href="#">о театре</a></li>
                                <li class="menu__item"><a class="menu__list-link" href="#">Наши постановки</a></li>
                                <li class="menu__item"><a class="menu__list-link" href="#">партнеры театра</a></li>
                                <li class="menu__item"><a class="menu__list-link" href="#">контакты</a></li>
                            </ul>
                        </nav>
                        <a class="phone" href="tel:74951234567">
                            +7 495 123-45-67
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

</html>

введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

1 ответ 1

1

Честно говоря, вопрос не до конца понятен. Можно сделать как-то так.

.parent{
  background: #ff0000;
}

.childern{
  background: #ffff00;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
}
<div class="parent">
  <div class="childern">
    Контактная информация
  </div>
</div>

Ваш ответ

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

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