Равноудаленные элементы в CSS

Добрый день! Сегодня хотел бы поговорить о реализации равноудаленных элементов с помощью css. Часто на блогах вижу горизонтальную полоску, в которой размещаются равноудалено блоки. Обычно – анонсы на предыдущим статьи или маленькая реклама. Для начала давайте разместим равноудалено 4 картинки. Для начала создадим блок, в который поместим 4 картинки, я размещу одинаковые картинки. !> В данном случае мы создали контейнер, и пропишем css стили для данного блока #main text-align:justify #main span display:inline-block; width:100%; С изображениями получилось) Давайте разберемся в коде. “Зачем, тут span”- спросите Вы. Мой ответ – “Получается span “ложится” под картинками и благодаря этому картинки не разваливаются”. Теперь давайте разберемся, как можно сделать 4 равноудаленных блока. Как всегда, для начала создадим контейнер, в который вложим 4 блока. Блок 1

Блок 2

Блок 3

Блок 4

!> Думаю, тут сложного ничего нету. Теперь пропишем css свойства #container text-align: justify; text-justify:newspaper; width:100% #include display:-moz-inline-box; display:inline-block; vertical-align:top; text-align:left; width:100px; height:100px; background:black; #textdisplay:-moz-inline-box; display:inline-block; width:100%; Всё хорошо отображается, можно изменить количество блоков. В данной статье, я вам показал как сделать равноудаленные элементы, используя css стили. Надеюсь, статья была полезная. С уважением,cava! http://www. cavablog. pp. ua/web-texnologii/ravnoudalennye-elementy-css/

Автор статьи: неизвестный | Дата публикации: 22:01 24.03.2017 Avafiles.Ru




Отзывы и комментарии
Ваше имя (псевдоним):
Проверка на спам:

Введите символы с картинки:



Выращивание лука-порея

Выращивание лука-порея


Сегодня МирСоветов расскажет о том, как выращивать на даче ещё одно полезное для здоровья растение – лук-порей. Его рекомендуется включать в повседневное питание страдающим ревматизмом, мочекаменной б...


Разработка дизайна сайта под конкретную целевую аудиторию

Разработка дизайна сайта под конкретную целев...


Не секрет, что одинаковую информацию (цвет, текст, визуальный объект и т. п) мужчины и женщины воспринимают по разному. Так же восприятие этой информации зависит от возрастной категории человека, соци...


Нужна ли вам мини-АТС?

Нужна ли вам мини-АТС?


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


Нежные поцелуи ниже пояса

Нежные поцелуи ниже пояса


Между тем, мы менее привередливы в данном вопросе - и глотать у нас нечего, и технику "глубокой глотки" осваивать для нас совсем не надо. А с другой стороны, для того чтобы успешно ласкать наши самы...


Наказание

Наказание


     В понедельник днём наш лайнер отчаливал от берегов Кипра. В субботу он причаливал к берегам Египта. Я ехал с семьёй(жена,я и четырёхлетний ребёнок). После посадки,мы пооб...


«Боже, благослови Америку!», или Чем промышляют потомки Линча?

«Боже, благослови Америку!», или Чем промышля...


Как часто вы мысленно нарушаете шестую заповедь? Мечтаете отправить на тот свет назойливого соседа, несносного босса или гаишника, из-за которого вы опоздали на важную встречу? Большинство проклятий п...


Читаемые

Контекстная реклама — самая непопулярная среди кру

В опубликованном исследовании компании Imho VI сделано несколько наблюдений. Во-первых, менять свою рекламную стратегию будут всего 37% компаний. Во-вторых, контекстная реклама, о росте которой в посл...

Вкусные рецепты: Огурцы в томате, Свекольная похле

Огурцы в томатеЗамочить огурцы в холодной воде на 1 час.Затем помыть и сложить в банки со специями(я половину огурцов сложила в банки целыми,а остальные порезала кружками 1 см.).Смешать всё для марина...

Умеют ли сомы лазать по деревьям?

Недавно пришлось побывать в краях, где протекает река Караузень, что в Западном Казахстане. Там мне рассказали удивительные истории про сомов. Да-да, про обычных рыб. Край, куда я ездил, богат рыбой, ...

Услуги такси в современном городе

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

Вкусные рецепты: Салат "Верона", Закусоч

Салат "Верона"Как-то ходили обедать в итальянский ресторан и решили взять бизнес-ланч. Среди предлагаемых блюд был и этот салат. Как же он нам тогда понравился :) - и ведь ничего сложного! Мы сидели, ...

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

«…Я вижу, что всё живое обречено на счастье…» Артюр Рембо Сложно ответить на вопрос: «Что такое счастье?». Для каждого из нас оно, возможно, выглядит как-то иначе...

Новая строительная кафедра в Москве

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

Остеохондроз или радикулит?

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

Регистрация бизнеса в Израиле (выбор формы регистр

В соответствии с законодательством Израиля любой легальный бизнес подлежит обязательной регистрации. В Израиле существуют 2 основных регистрационных барьера:1. Выбор организационно-правовой формы бизн...

Как узнать человека по походке?

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

О информационном портале:

Наш портал является ресурсом, который включает в себя обширный список полезных и отличных статей. Каждый посетитель найдет для себя что-нибудь полезное. Адаптированный дизайн позволяет вам максимально быстро находить необходимую информацию. Самые разнообразные тематические статьи дают возможность вам совершенствоваться в той или иной сфере. Быть более начитанным и грамотным. Современный дизайн сайта позволяет просматривать статьи на всех существующих планшетах. Теперь отыскать нужную информацию стало совершенно легко.

Мы собрали для вас познавательные и отличные статьи. На нашем сайте вы отыщите ответы на необходимые для вас вопросы. Простая система поиска дает возможность вам не тратя время отыскать нужную информацию. Адаптированный дизайн позволяет вам просматривать информацию на абсолютно любых электронных устройствах. Отныне, поиск требуемой информации будет занимать у вас считанные секунды.