Проверка ваших навыков: floats
Цель этого задания - чтобы вы поработали со свойствами CSS float и clear которые описаны в нашем уроке Floats. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.
Если вы застрянете, попросите нас о помощи — см. раздел Оценка или дальнейшая помощь в конце страницы
Floats Раз
В этом задании вам необходимо чтобы два элемента с классами float1 и float2 обтекали слева и справа соответственно. Текст должен появляться между двумя блоками как на изображении ниже.
Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
Примечание: Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.
Float Два
В этом примере элемент с классом float должен примыкать к левому краю и обтекаться справа. Далее мы хотим чтобы первая строка текста отображалась рядом с тем элементом, а следующая строка (с классом .below) отображалась под ним. Вы можете посмотреть желаемый результат на этом изображении.
Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
Примечание: Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.
Float Три
И наконец у нас есть обтекаемый элемент в этом примере. Блок оборачивающий обтекаемый элемент и текст отображается за ними. Используйте самый последний доступный метод чтобы фон тянулся за обтеканием как показано на изображении.
Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
Примечание: Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.
Оценка или дальнейшая помощь
Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.
Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:
-
Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
-
Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать:
- Описательный заголовок такой как "Требуется оценка теста по навыкам Float".
- Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
- Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
- Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.