Блоки в одну строку
Ребят, такая проблема. Хочу чтобы лого был на одной строке с меню, я это сделал. Но меню очень низко сидит на странице (т.к. на одном уровне с эмблемой). Как сделать так, чтобы лого осталось на этой же позиции, а блок меню поднялся чуть выше?
.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 золотых знаков 33 33 серебряных знака 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 линию/строку.
Все рассматривать не буду, расскажу только об основных, которые чаще всего используются на практике и хорошо себя зарекомендовали, для каждой задачи подход может быть разным.
Выровнить элементы в одну строку можно несколькими способами:
- display: inline-block; — данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойство width , блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством.
.block
- float: left/right; — Аналогичное по результату display: inline-block , но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа
с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-right
.block
- 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; ссылка
Как сделать с помощью css блоки в линию?
От автора: я приветствую вас. Необходимость представить несколько блоков на веб-странице в одну линию — очень частая задача, которая возникает перед верстальщиками. Она возникает при верстке практически каждого шаблона, поэтому всем нам в любом случае нужно знать и применять основные способы изменения поведения блоков.
Прежде чем мы посмотрим самые распространенные приемы, хотел бы вспомнить немного теории. Элементы веб-страницы делятся на блочные и строчные. И разница между ними очень проста — строчные могут располагаться в одну строку, а блочные — нет. Конечно, на этом различия не заканчиваются, но это основное отличие. Уже у блоков могут быть отступы сверху и снизу (у строчных — нет), а также к ним можно применять больше свойств.
Основные способы выстроить в css блоки в ряд
Есть мы не будем ничего усложнять, есть 3 основных способа:
Преобразовать блоки в строчные элементы. При этом блочные свойства теряются, поэтому этот вариант практически никогда не используется
Сделать нужные элементы блочно-строчными. Это специальный тип, при котором элемент сохраняет свои свойства, но в то же время позволяет другим блокам расположиться рядом.
Сделать элементы плавающими с помощью свойства float.
На этих вариантах остановимся. Флексбокс, табличное отображение и другие моменты рассматривать не будем. Итак, пускай у нас есть 3 подзаголовка.
< h3 >Заголовок 1 < / h3 >
< h3 >Заголовок 2 < / h3 >
< h3 >Заголовок 3 < / h3 >
Естественно, все css-свойства нужно прописывать в отдельном файле (style.css), который нужно подключить к html-документу. В этот файл я запишу минимальный стиль, чтобы просто было видно наши подзаголовки.
background : #EEDDCD;
Вот они на странице:
Есть они ведут себя как блоки. Кадый располагается на своей строке, между ними есть отступы. При желании также вы можете задать какие-угодно внутренние отступы и вообще сделать что угодно.
Преобразуем в строки и сразу добавим внутренние отступы. Для этого селектору h3 нужно добавить такие свойства:
display : inline ;
padding : 30px ;
Как видите, отступы применились не совсем корректно, это как раз потому, что мы имеем дело со строками. Если изменить отображение на блочно-строчное, отступы добавятся корректно. Для этого всего лишь меняем значение свойства:
display : inline — block ;
Есть 2 основные проблемы, которые возникают при использовании этого приема. Первая — это минимальный отступ. Образуется он из-за того, что в коде между блоками есть один пробел, который и образует этот отступ. Если эта проблема нуждается в решении, есть 2 основных варианта:
В html расположить код нужных блоков в одну линию без пробелов
Проставить отрицательный внешний отступ справа -4 пикселя. Именно столько занимает один пробел.
Вторая проблема — при разной высоте элементов могут возникать проблемы с отображением. В общем, наилучший вариант — плавающие блоки. Вместо display: inline-block пишем вот что:
float : left ;
И все наши заголовки третьего уровня теперь будут прижиматься к левому краю. Соответственно, также можно прижать их и к левому. При использовании этого приема вышеописанных проблем не возникает изначально.
Единственное, за чем вы должны следить в таком случае — отмена обтекания. Следующему блоку после плавающих нужно поставить свойство clear:both, чтобы он не пытался обтекать эти блоки, а расположился ниже, как и положено.
Блоки в линию с использованием фреймворка
Сразу скажу, что если вы собираетесь использовать любой нормальный css-фреймворк (например, Bootstrap) то там все еще гораздо проще. Весь css-код, отвечающий за расстановку элементов, уже написан и вам останется лишь задан правильные классы. Для этого достаточно изучить систему сетки, и вы сможете делать многоколоночные адаптивные шаблоны без особых трудностей. По крайней мере, это будет значительно проще, чем при написании css с нуля.
Еще одна проблема написания кода с нуля возникает как раз когда вам нужен адаптивный дизайн. Конечно, его можно реализовать самостоятельно, владея медиа-запросами, но это будет намного сложнее, если у вас сложный шаблон.
Например, когда у вас на больших экранах должно быть 4 колонки, на средних — 3, а на мобильных телефонах — 2. С помощью таких фреймворков, как Bootstrap, а точнее с помощью его сетки, реализовать подобное — дело буквально нескольких минут.
Плавно переводя тему на фреймворк Bootstrap, в очередной раз отмечу, что если перед вами стоит задача сверстать сложный адаптивный шаблон, то просто грех не воспользоваться сеткой. Для этого даже не обязательно подключать полную версию фреймворка – его можно кастомизировать и остановить там только то, что действительно вам нужно.
Научиться работать с фреймворком вы сможете с помощью нашего платного курса. Там объясняется и теория, но самое главное – есть практика. Вы сверстаете 3 адаптивных шаблона и получите отличный опыт, который позволит верстать сайты на заказ или для себя. А если вы хотите бесплатно ознакомиться с преимуществами и возможностями фреймворка, предлагаю вам просмотреть нашу серию статей по Bootstrap, а также бесплатный мини-курс по верстке простого макета. Желаю вам успехов в верстке и сайтостроении в целом.
Свойство flex-wrap
Свойство flex-wrap задает многострочную расстановку блоков по главной оси. Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение flex-flow .
Синтаксис
Значения
| Значение | Описание |
|---|---|
| nowrap | Однострочный режим — блоки выстраиваются в одну строку. |
| wrap | Блоки выстраиваются в несколько строк, если не помещаются в одну. |
| wrap-reverse | То же самое, что и wrap, но блоки выстраиваются в другом порядке (сначала последний, потом первый). |
Значение по умолчанию: nowrap .
Пример . Значение wrap
Сейчас блоки не помещаются в свой контейнер и выстроятся в несколько строк:
#parent < display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение wrap-reverse
А теперь порядок следования поменяется на обратный (смотрите на цифры внутри блоков):
#parent < display: flex; flex-wrap: wrap-reverse; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение nowrap
Сейчас блоки будут располагаться в однострочном режиме (так по умолчанию). При этом значение ширины width для блоков будет проигнорировано, если оно мешает блокам помещаться в родителя. Обратите внимание на то, что блоки поместились в родителя, но их реальная ширина не 100px , как им задано, а меньше:
#parent < display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение nowrap
Однако, если блоки помещаются при заданной им ширине — то свойство width не будет проигнорировано. Уменьшим количество блоков так, чтобы они все влезли:
#parent < display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Смотрите также
- свойство flex-direction ,
которое задает направление осей flex блоков - свойство justify-content ,
которое задает выравнивание по главной оси - свойство align-items ,
которое задает выравнивание по поперечной оси - свойство flex-wrap ,
которое многострочность flex блоков - свойство flex-flow ,
сокращение для flex-direction и flex-wrap - свойство order ,
которое задает порядок flex блоков - свойство align-self ,
которое задает выравнивание одного блока - свойство flex-basis ,
которое задает размер конкретного flex блока - свойство flex-grow ,
которое задает жадность flex блоков - свойство flex-shrink ,
которое задает сжимаемость flex блоков - свойство flex ,
сокращение для flex-grow, flex-shrink и flex-basis
Как поставить блоки в ряд css
И сделаем так, что при масштабировании окна или сжатие, то блоки переносятся на следующее строку. Иногда нам нужно поместить изображение в один ряд, вот как раз такие блоки помогут осуществить задуманное.
Здесь не чего сложного нет, что изначально воспользуемся свойством float, который отвечает за выравнивание. Случается так, что один блок может просто наехать на следующий, для этого зададим им обтекание, где подключаем свойство clear.
Приступаем к установке, что сразу всем блокам задаем параметр float:left — из по умолчанию идут 5 блоков.
#vesaasm-udogavun <
width: 123px;
height: 64px;
background: #c7c2c2;
float: left;
margin: 0 20px 20px 0;
text-align: center;
padding: 8px;
border: 2px solid #867d7d;
>
Для того, чтобы выставить 2 блока в один ряд, то здесь уже нужно float для них задать, а также left для одного и right для другого, чтоб все корректно смотрелось.