как иметь два заголовка на одной строке в HTML
Я хочу иметь две заголовки h2 и h3 на одном и том же горизонтальном правиле слева, а другой справа. У них есть HR под ними, и я хочу, чтобы они находились на одинаковом расстоянии от этого HR.
Я попробовал сделать их как встроенными, так и иметь один плавающий правый, а другой — влево. Проблема с этим была с h3, поскольку она меньше h2 по вертикали, она была центрирована на половину длины h2.
h2 был похож на сидящий на hr, а h3 вид выглядел как плавающий в воздухе.
Шесть способов выстроить div-блоки в строку
HTML
<div > <div line_1"> <! — 2, 3 и т.д. до 6 — >
<div > <div > <div > </div>CSS
body <
margin: 0;
padding: 0;
>.description <
padding: 30px;
background-color: #f5f5f5;
font-family: sans-serif;
>.content
.lang_en
.line <
width: 100%;
margin-bottom: 17rem;
>.line__item <
width: calc(100% / 3);
height: 200px;
background-color: #2174fe;
border: solid #26344e 10px;
>.line__item:nth-child(2)
.line__item:nth-child(3)
Способ 1. (Table)
.line_4 <
display: table;
table-layout: fixed;
>.line_4 .line__item
Способ 2. (Float)
.line_5
.line_5 .line__item <
float: left;
box-sizing: border-box;
height: 220px;
>
CSS: элементы в строку
Верстка
По умолчанию все блочные элементы в HTML выстраиваются в ряд друг под другом и занимают всю ширину страницы. И тут же у новичков возникает вопрос как расположить, с помощью CSS элементы в строку. Существует 2 наиболее популярных способа это сделать.
- Использовать display: inline-block
- Использовать float: left/right
Рассмотрим каждый из них.
CSS свойство display: inline-block
Данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. Важно понимать как работает это свойство, поэтому давайте рассмотрим на практике. Сделаем 3 блока внутри родительского и расположим их в одну линию. Вот что получилось:
HTML разметка выглядит следующим образом:
Как видно на изображении я добавил свойства background и border, чтоб наглядно видеть происходящее на странице. Обязательно задаем всем элементам height иначе оно будет равно 0 по умолчанию и мы ни чего не увидим. Трем блокам .child задаем display: inline-block и width: 30%.
ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку.
Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством. Если попробуем изменить класс для блока .child находящегося по середине, тем самым убрав все стили, то увидим что все элементы выстроились в ряд.
CSS свойство float: left или float: right
Аналогичное по результату inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Давайте попробуем убрать из предыдущего примера
Как сделать что бы в одной строке часть текста была справа, а часть слева?
Как выровнять текст на одной строчке, как это сделано на этой картинке:
Это вообще можно сделать с помощью css или какого то тега html? Или нужно просто поделить ячейку на 2 и применить text-align: left | right
Ссылка на комментарий
Поделиться на других сайтах
9 ответов на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.