Селекторы в CSS3

Как сделать два блока на одном уровне в html

Как сделать, чтобы в css блоки были на одном уровне(линии)?

Заранее извините за тупость, я из деревни.
С помощью css надо расположить три блока в ряд. Центральный должен занимать 70%, два крайних по 15%.
Вот html код:

Но почему-то центральный блок расположен выше, чем два крайних:

Когда увеличиваю длину блоков до 100%, то соответственно появляется полоса прокрутки:

Как это исправить?

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

• Facebook
• Вконтакте
• Twitter

О господи люди до сих пор верстают float’ами. Я думал динозавры уже вымерли. Держи правильный вариант.

Как сделать два блока на одном уровне в html

• 
• 
• 

Два или более разных div одинаковой высоты могут быть помещены рядом с помощью CSS. Используйте свойство CSS, чтобы установить высоту и ширину div, и используйте свойство display, чтобы разместить div в формате рядом друг с другом.

Используемые свойства отображения перечислены ниже:

display:table: Это свойство используется для элементов (div), которые ведут себя как таблица.
display:table-cell: Это свойство используется для элементов (div), которые ведут себя как td.
display:table-row: Это свойство используется для элементов (div), которые ведут себя как tr.

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

Также вы уже самостоятельно можете их редактировать по цветовой гамме или по оформлению, где можно добавить красивые обводы и тени, все зависит от дизайна, где будут установлены.

Способы размещения блоков горизонтально

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Из чего выбрать или методы

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

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

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

Инлайновые (встроенные) — типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные — занимающие всю ширину родительского блока, всегда начинаются с новой строки — p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

Метод «Float»

Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.

Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

Для примера, создадим четыре блока, которые нужно разместить в ряд:

И внешнюю таблицу стилей с следующим содержимым:

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

Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили — выровнял по правому краю. Учтите этот момент при использовании свойства float: right.

Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

В результате получаем такую картину:

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

Ширина блоков должна быть фиксированной. Иначе получите что-то такое:

Метод «Inline-block»

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

Встречайте, гвоздь программы — свойство display: inline-block.

display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства — позволяет изменять линейные размеры, задавать поля, отступы и т.д.

Блочно-строчный элемент имеет следующие свойства:

• высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
• высота и ширина блока может быть задана фиксировано
• Отсутствует эффект схлопывания границ.

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

В результате получаем такую менюшку:

Как видим, получилось кривовато… Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

Теперь наша навигационная панель выровнялась по верхней линии:

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

1. При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
2. Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
   HTML:

Результатом рендеринга такого кода будет следующая картина: Есть несколько способов убрать зазоры:

подобрать отрицательные значения margin:

Результатом применения любого из выше перечисленных приемов будет следующая структура:

Для древних версий Firefox добавляем строчку:

Метод «Table»

Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS. Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц. Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

Два блока рядом друг с другом CSS

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

Создание блоков в HTML

Оформление блоков DIV рядом друг с другом по горизонтали

Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в CSS двум элементам следующие параметры: На выходе получим результат, как показано на изображении справа.

• float — можно придать значения «left» и «right«, фактический означает к какой стороне прикрепить блок, можно например первый блок разместить слева, второй справа и они хорошо впишутся. Пример смотрите в конце статьи в созданном шаблоне.
• display: block; — выводит div блоком.

Дополнительные настройки

Остальные параметры носят декоративный характер:

• width — задаём размер блокам
• border — настраиваем границу блоков
• margin — внешние отступы, чтобы блоки не прилипали друг к другу

Примечание

Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.

Источник

Как расположить элементы на одном уровне html

Селекторы элементов одного уровня или смежных элементов позволяют выбрать элементы, которые находятся на одном уровне вложенности. Иногда такие элементы еще называют сиблинги (siblings) или сестринскими элементами. Например:

 
Заголовок
 
Текст первого блока
 
 
Текст второго блока
 
  

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

Чтобы стилизовать первый смежный элемент по отношению к определенному элементу, используется знак плюса +:

     h2+div 
Заголовок
 
Текст первого блока
 
 
Текст второго блока
 
   

Селектор h2+div позволяет определить стиль (в данном случае красный цвет текста) для блока div, который идет непосредственно после заголовка h2:

Причем этот селектор будет стилизовать блок div, если он будет идти непосредственно после заголовка. Если же между заголовком и блоков div будет находиться еще какой-либо элемент, то к нему не будет применяться стиль, например:

ЗаголовокЭлемент между заголовком и блоком div
 
Текст первого блока
 
 

Если нам надо стилизовать вообще все смежные элементы одного уровня, неважно непосредственно идут они после определенного элемента или нет, то в этом случае вместо знака плюса необходимо использовать знак тильды «~»:

     h2~div 
Заголовок
 
Аннотация
 
Текст первого блока
 
 
Текст второго блока
 
   

Источник

Как выровнять 3 разных DIV на одном уровне

Как разместить в шапке сайта и на одном уровне?
Помогите. Подскажите, пожалуйста, как разместить в шапке сайта <nav> и <div> на одном уровне. .

Выровнять галочку с текстом на одном уровне
Доброе времени суток. Столкнулся с проблемой, не могу выровнять галочку с текстом на одном уровне.

Выровнять текст по вертикали на одном уровне с элементом
Подскажите, пожалуйста, как "приподнять" текст, чтобы он был по центру блока #reserve Скриншот.

Как сделать чтобы 2 разных цвета тянулись в разные стороны на одном уровне
Как сделать чтобы 2 разных цвета тянулись в разные стороны на одном уровне. Нужно реализовать.

display:inline-block; vertical-align:top

Сообщение было отмечено zoombo как решение

Решение

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

html> head> title>DIV/title> meta charset="utf-8"> style> #loginlnk < width: 25%; float: left; >#loginlnk ul li < float: left; list-style-type: none; margin-left: 5px; >div#nav < font-size:16px; float: left; width: 50%; >div#nav ul li < float: left; margin: 0px 10px 0px 10px; >div#nav ul li a < color:#e85222; >#phone < float: left; width: 25%; >/style> /head> body> div id="loginlnk"> ul> li>a rel="nofollow" href="http://www.asyst.ru/index.php?ukey=auth">Войти c паролем/a>/li> li>a rel="nofollow" href="http://www.asyst.ru/index.php?ukey=register">Зарегистрироваться/a>/li> /ul> /div> div id="nav"> ul> li>a href="1.html">Главная/a>/li> li>a href="2.html">Акции/a>/li> li>a href="3.html">Прайс/a>/li> li>a href="4.html">Доставка/a>/li> li>a href="3.html">Оплата/a>/li> li>a href="3.html">Гарантия/a>/li> li>a href="4.html">Контакты/a>/li> /ul> /div> div id="phone"> p style="font-size:19px;">8(495)123-45-67/p> p style="font-size:11px;">Ежедневно с 10:00 до 21:00/p> a href="3.html">Не смогли дозвониться?/a> /div> /body> /html>

Источник

Два div на одной строке

Два div`a в одной строке
Добрый день, объясните пожалуйста, в чем проблема? Как я понимаю, psot должен стать рядом с post в.

Установить на одной высоте два елемента div
У меня есть footer. В нем есть два тега div. Мне нужно чтобы эти теги были на одной высоте, но в.

3 блока div на одной строке
Необходимо разместить 3 блока div на одной строке. Блоки фиксированной ширины(300px). Блоки.

.frame { display: inline-block; width: 50%; /* в зависимости от отступов нужно будет указать нужный % */ }

Сообщение было отмечено damirqa как решение

Решение

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

 html lang="en"> head> meta charset="UTF-8"> title>Тестируем/title> link rel="stylesheet" href="style.css"> style> html, body < padding: 0px; margin: 0px; >.menu < max-width: 100%; height: auto; overflow:hidden >.frame < float:left; width: 50% >img < width: 100% >/style> /head> body> div class="menu"> div class="frame">img src="http://www.zooclub.ru/skat/img.php?w=700&h=700&img=./attach/7328.jpg" alt="">/div> div class="frame">img src="http://www.zooclub.ru/skat/img.php?w=700&h=700&img=./attach/7328.jpg" alt="">/div> /div> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

 html lang="en"> head> meta charset="UTF-8"> title>Тестируем/title> link rel="stylesheet" href="style.css"> style> html, body < padding: 0px; margin: 0px; >.menu < display:flex; max-width: 100%; height: auto >.frame < display:inline-block; width: 50% >img < width: 100% >/style> /head> body> div class="menu"> div class="frame">img src="http://www.zooclub.ru/skat/img.php?w=700&h=700&img=./attach/7328.jpg" alt="">/div> div class="frame">img src="http://www.zooclub.ru/skat/img.php?w=700&h=700&img=./attach/7328.jpg" alt="">/div> /div> /body> /html>

Источник