Как заставить (повернутые) элементы в вертикальной флексбоксе НЕ перекрываться? - PullRequest
Новая
       25

Как заставить (повернутые) элементы в вертикальной флексбоксе НЕ перекрываться?

1 голос
/ 19 октября 2019

Я пытаюсь поместить повернутый текст в верхний левый угол страницы и добавить строку поверх указанного текста, примерно так .

Я пытался сделать этоимея вертикальную гибкую коробку. Я предположил, что, рисуя линию как <b>div</b>, а затем добавляя элемент <b>h3</b>, интервал будет обрабатываться с помощью flex box. Для справки вот код: 

<div style="display: flex; 
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            margin-right: 90%; 
            height: 100vw;
            width: auto;
            ">

            <hr style="transform: rotate(-90deg);
                       width: 9%;
                       position: fixed;">

            <h3 style="font-family: Italianno; 
                       font-size: 170% ;
                       transform: rotate(-90deg);
                       margin-top: 80%;" 
                       id="fancy-logo">

                Sorority
            </h3>

</div>

К сожалению, когда я изменяю размер страницы, строка вверху в конечном итоге перекрывается со словом? Любой совет, как справиться с этим?

Ответы [ 2 ]

2 голосов
/ 19 октября 2019

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

div {
  display: inline-block;
}

div:before {
  content: '';
  width: 1px;
  height: 100px;
  background: #000;
  display: block;
  margin: 0 auto;
}

h3 {
  margin: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  padding-bottom: 1em;
}
<div>
  <h3>
    Sorority
  </h3>
</div>
0 голосов
/ 19 октября 2019
Режим записи

действительно хороший способ для начала, и здесь также очень удобно использовать flex для рисования этой визуальной линии, но вместо псевдо вместо hr

значение режима записи будет sideside-rl, ноне везде работает, трансформация может использоваться здесь для отражения самого h3.

пример 

h3 {
  writing-mode: vertical-lr;
  display: flex;
  padding: 0.5em 0 0;
  transform: scale(-1, -1);
  background:lightgray
}
h3::after {
  content: "";
  flex: 1;
  border: outset 2px;
  margin: 0.5em auto 0;
}


body {margin:0;}
div {
  min-height: 80vh;/* if not enough content to stretch it */
  display: flex;
}
div[class] {margin:auto;min-height:auto;display:block;}
<div>
  <h3>
    Sorority
  </h3>
  <div class> <!-- extra markup for demo *-->
    <p>looking for more content to set here aside, but not rotated ?</p>
    <p>inside a flex box, this div can be aligned</p>
  </div>
</div>

Вот кодекс из аналогичного вопроса

...