Как создать вертикальный разделитель в css?

У меня есть компонент React, и я хочу создать вертикальный разделитель (высотой 1 см) между текстом и изображением:

<div class = "container">
  <span>goodmorning hello user!</span>
  <span class = "divider" /> <img src = "./bell.png" />
</div>

Это CSS, который я использую:

.container {
  flex: 1 0 0;
}

.divider {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 40%;
  border-left: 1px solid black;
}

Как получить вертикальную черту между искл. марка и изображение? кодовый ключ

html недействителен, нет самозакрывающегося диапазона ... вы должны использовать <span></span>. Кстати, вы можете просто добавить рамку к тексту

— 19.11.2018 09:41

Попробуйте этот пост: stackoverflow.com/questions/4675371/vertical-divider-css

— 19.11.2018 09:43

css reactjs

19.11.2018 09:38

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

9 254

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Вам нужно удалить position: absolute из CSS и добавить несколько других стилей для точного размера, который вы хотите. Вот простой пример, который я сделал на основе вашего кода: https://codesandbox.io/s/kj1monoxo

Я хочу, чтобы перегородка была высотой 1-2 см. Как я могу это сделать?

— 19.11.2018 09:49

Вы можете использовать height: 1cm;, если хотите

— 19.11.2018 09:51

19.11.2018 09:48

Родительский контейнер должен иметь display: flex и убрать абсолютное позиционирование.

Демонстрация CodeSandbox

.container {
  display: flex;
  justify-content: space-around;
}

.divider {
  border-left: 1px solid black;
}

<div class = "container">
  <span>goodmorning hello user!</span>
  <span class = "divider"> </span>
  <img src = "https://uploads.codesandbox.io/uploads/user/1755a454-9fe4-4200-8cf7-f76e5c1cbdec/hE5V-bell.png" />
</div>

19.11.2018 09:50

Я предлагаю использовать div, которые по умолчанию являются блочными элементами, а затем использовать display: flex в контейнере:

.container {
  display: flex;
}

.divider {
  width: 1px;
  background-color: black;
  margin-left: 20px;
  margin-right: 20px;
  height: 1cm;
}

<div class = "container">
  <span>goodmorning hello user!</span>
  <div class = "divider"></div>
  <img src = "https://img.freepik.com/free-vector/golden-bell_1262-6415.jpg?size=338&ext=jpg&ve=1" />
</div>

19.11.2018 09:51

вместо границы с пустым элементом диапазона, почему бы вам не попробовать ширину:

.divider {
  position: relative;
  min-width:2px;
  max-width:2px;
  background-color:#000;
  display:inline-block;
  margin:0 0.25%;
}

19.11.2018 09:55

enter code here
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <style>
               .vl {
     border-left: 6px solid green;
        height: 500px;
      }
          </style>
           </head>
        <body>

          <h2>Vertical Line</h2>

            <div class = "vl"></div>

19.11.2018 09:59

Другие вопросы по теме

Стили не работают через стилизованные компоненты

Response-md SelectField onChange не обновляется должным образом

Передайте параметр из внешнего js в React prop

React.js при использовании переменной, не относящейся к состоянию. Получение ошибки, поскольку компонент изменяет неконтролируемый ввод текста, подлежащего контролю

React-Redux: this.props.data.map не является ошибкой функции

React Typescript: свойство 'match' отсутствует в типе {}. (Попытка использовать свойства при инициализации компонента)

Преобразование буфера документа Node.js в файл pdf для вывода его в клиент

Запуск нескольких CMD в dockerfile

Ссылки для динамически генерируемых компонентов в React?

ReactJS: изменить отображаемое текущее изображение с помощью кнопок назад и вперед

Как создать вертикальный разделитель в css?

Ответы 5

Другие вопросы по теме

Похожие вопросы