Как выставить блоки в одну строку css
Перейти к содержимому

Как выставить блоки в одну строку css

  • автор:

Как разместить h1 и h2 в одну строчку? (css)

если заголовкам float:left поставить, то они в одну строчку выравниваются, но слева 🙁 а без float один под другим получаются.

На сайте с 24.12.2009
10 августа 2012, 12:22

Заголовок

подзаголовок

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
На сайте с 12.09.2009
10 августа 2012, 12:29

Ну, вообще-то, предполагает, что то, что выделено этими тегами, занимает отдельную строчку �� Я бы сделал так (фонтсайз и дивы здесь не прописываю; речь о принципе):

Заголовок : Подзаголовок

Заголовок : Подзаголовок

То бишь всё в одну строчку, в один h-тег, а размер шрифта внутри оного уже двигать бигом или смоллом (по вкусу :))

Наше дело правое — не мешать левому!
На сайте с 14.01.2009

vlad00777:
display:inline-block; попробуйте.

Заголовок

подзаголовок

Все-равно слева отображается. В принципе, норм, но желательно по центру
На сайте с 15.03.2012
10 августа 2012, 12:30
inline-block не работает в IE7, если вдруг это Вас озаботит) как альтернатива float: left у обоих
На сайте с 14.01.2009

Moltisanti:
inline-block не работает в IE7, если вдруг это Вас озаботит)
как альтернатива float: left у обоих

Как сделать блоки в одну линию с заполнением растяжением на 100%?

Как сделать, чтобы блоки выстраивались все в одну линию и автоматически растягивались (в равной степени) на всю ширину блока?

inline-block работает только с фиксированным значением блоков.

Вопрос, вроде, простой. Найти ответ не могу.

  • Вопрос задан более трёх лет назад
  • 3158 просмотров

Комментировать
Решения вопроса 1

ThunderCat

ThunderCat @ThunderCat Куратор тега CSS
tpverstak.ru/flex-cheatsheet
Почувствуйте магию флекса
Ответ написан более трёх лет назад
Нравится 2 4 комментария
kroha3000 @kroha3000 Автор вопроса
А без Flexbox возможна реализация?

ThunderCat

ThunderCat @ThunderCat Куратор тега CSS

kroha3000, во первых — нахуа, если это просто и уже везде поддерживается? во вторых — ну, через яваскрипт, но это криво.

kroha3000 @kroha3000 Автор вопроса

Лет 7 уже не верстал, и про флекс бокс знаком, но по привычке сомнения, но если используется повсеместно, то ок, спасибо!

kroha3000, через float: left и width: 33% — но есть нюансы. Лучше воспользоваться все-равно флексом (посмотрите мой ответ) , т.к. можно будет блоки также выравнивать относительно других (одинаковый размер блоков по высоте/ширине) и другие удобства флексбокса. К тому же флекс уже поддерживается всеми современными браузерами, а совсем древние версии этих браузеров осталось пользователей — единицы для специальных нужд.

Как разместить два и более блоков div рядом с помощью CSS

Сегодня поговорим про div элемент и про то как разместить два таких элемента рядом. Данная проблема возникают у новичков которые только начинают изучать HTML и CSS. Ситуаций в которых это необходимо сделать может быть очень много, например, разместить две карточки товара, превью статей, двух рекламных блоков и т.д. Углубляться в во все тонкости не буду, просто расскажу как можно разметить два и более блоков div рядом. Сделать это можно с помощью CSS, используя свойство «display» со значением «inlineblock» .

Более опытным пользователям данного ответа в прицепи хватить, так как они должны понять что и куда написать что два элемента div расположились рядом. А для остальных разберем все на самом простом и понятном примере.

Как расположить два блока div рядом по горизонтали

И так есть два div элемента, необходимо сделать так чтобы они расположились рядом по горизонтали.

div Элементы в одну строку

Для этого в стилях каждого блока div необходимо дописать свойство.

Как разместить два и более блоков div рядом с помощью CSS

После этого элементы div должны отобразиться следующим образом.

Как разместить два и более блоков div рядом

С помощью данного свойства можно расположить рядом и любое другое количество div.

Как расположить два блока div рядом по горизонтали

Три, четыре, пять ….

Как разместить 3 блока div в одну строку HTML+CSS

Вот таким образом можно разместить два блока div в одну строку.

Блоки в одну строку

Ребят, такая проблема. Хочу чтобы лого был на одной строке с меню, я это сделал. Но меню очень низко сидит на странице (т.к. на одном уровне с эмблемой). Как сделать так, чтобы лого осталось на этой же позиции, а блок меню поднялся чуть выше?

.header < color: #22D99F; background-color: #052230; border: 3px solid #6593E1; border-radius: 30px; font-size: 40px; margin-top: 50px; margin-left: 200px; margin-right: 10px; padding-left: 50px; padding-right: 50px; padding-bottom: 10px; padding-top: 10px; text-align: center; width: 1100px; >.news < margin-right: 30px; display: inline-block; font-size: 30px; background-color: #6593E1; border: 5px solid #382C49; border-radius: 30px; color: #D2C2E1; padding-left: 10px; padding-right: 10px; width: 200px; text-align: center; >.news:hover < background-color: #78527E; color: lime; >.hood < display: inline-block; >.lab < margin-left: 50px; margin-top: 50px; width: 200px; height: 250px; background-image: url('http://russia-assault.ru/files/forums_imgs/1506001407.png'); background-position: center; >
  
Новости
Статистика
Турниры
Матчи

Если не совсем поняли суть вопроса — пишите. Спасибо.
Отслеживать
14.5k 6 6 золотых знаков 35 35 серебряных знаков 71 71 бронзовый знак
задан 7 янв 2019 в 23:19
15 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
Добавьте, пожалуйста, полный код, не вижу в примере класса .lab
7 янв 2019 в 23:34
@meine добавил,извини,что так некрасиво табуляцию произвел,надеюсь поймешь.
8 янв 2019 в 5:24

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Хочу чтобы лого был на одной строке с меню, я это сделал.

Не подумайте, что это оскорбление, но я не увидел картинку и меню на одной строке.

Здесь я привел пример как Вы можете выстроить свой код, а снизу я расскажу в общем о выстраивании элементов в 1 линию/строку.

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

Выровнить элементы в одну строку можно несколькими способами:

  1. display: inline-block; — данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойство width , блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством.
.block
  1. float: left/right; — Аналогичное по результату display: inline-block , но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа

    с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-right

.block
  1. display: flex; — c помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю. Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси. Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте. И теперь родительскому( .container ) элементу добавляем display: flex; . Внутренние div -ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.
.container < display: flex; >.block

Главную суть выстраивания элементов я передал, подробнее Вы сможете почитать в интернете. Снизу я приложу ссылки.

Подробнее о свойстве display: flex; Вы можете почитать перейдя по этой ссылке.

Свойство display: inline-block; ссылка

Свойство float: left/right; ссылка

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *