Как создать 3 элемента в одной строке в css? - PullRequest
Новая
       40

Как создать 3 элемента в одной строке в css?

0 голосов
/ 31 января 2020

Я пытаюсь создать стиль CSS, который отображает 3 элемента в одной строке, но вторые элементы должны начинаться после окончания первого элемента, третий элемент начинается после окончания 2-го элемента.

It должен быть отзывчивым. Спасибо.

Please see the image

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Если вы создаете некоторые пользовательские символы кавычек, просто используйте quotes css и ::before ::after псевдоэлементы, чтобы настроить их: 

q {
  quotes: "<" ">";
  padding-left: 1rem;
  display: block;
}

q::before {
  display: block;
  margin-left: -1rem;
}

q::after {
  margin-left: 0.5rem;
}

q::before, q::after {
  position: absolute;
  margin-top: -0.5rem;
  font-size: 1.5em;
  color: purple;
}
<q>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quisquam nam perspiciatis obcaecati aspernatur quo nostrum culpa! Earum beatae ducimus architecto amet totam debitis sint cupiditate consequatur sapiente, sit nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quisquam nam perspiciatis obcaecati aspernatur quo nostrum culpa! Earum beatae ducimus architecto amet totam debitis sint cupiditate consequatur sapiente, sit nihil.</q>
0 голосов
/ 31 января 2020

Вы можете просто сделать это без использования css

<div>
  <a href="#">@</a>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsd<br>fsdfdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd<br>fdsfsdfsdfsdfsdfsd
  <a href="#">@</a></div>
...