Огромное спасибо за ваши уроки!!! Долго искал курсы бесплатные через торент, записи с телегармов. А оказалось всё просто, вбиваешь в ютуб html и всё))) Я вообще не понимаю, как вы это бесплатно выкладываете. Ваши уроки понятнее, веселее, нагляднее, чем любые другие платные курсы за 10-30 т.р. Низкий вам поклон за то, что вы проделали 2 года назад
Однозначно, вы, Андрей, один из лучших ведущих уроков, уже подходят к концу уроки ваши, я буду ждать новых, пока наверное к концу недели перейду на изучение Java
хочу поблагодарить вас за такой шикарный контент) пересмотрел/прошел несколько , как и платных, так и бесплатных курсов и по своему опыту могу сказать, что проделанная Вами работа лучше многих платных курсов! Спасибо Вам за возможность научиться чему-то новому!
Очень доступно объясняешь. Смотрю некоторые материалы по СSS, имея кое-какие знания в данной области, и 4 видео по JS , будучи полным 0-м . Несмотря на то, что программирование я не изучала, а только html и CSS (скромные знания), абсолютно все поняла. До твоего курса по JS смотрела видео твоих коллег - все запутанно и непонятно. Так что, я рада, что случайно нашла твой канал, восполняя знания по float, и открыла удивительный курс по JS.
@@andrievskii у меня проблема когда перехожу на мобильный вид и меняю ширину экрана блоки плывут и каждого разная длинна выходит как этого избежать? ( ширину блокам задавал в px)Спасибо
Огромное спасибо Андрей) Очень нравятся твои уроки) на данный момент пройдена уже большая половина твоего курса) и это первый курс который я хочу продолжать открывать и не закинул в долгий ящик) еще раз спасибо)
Единственное, о чём было не упомянуто, что свойство box-sizing: border-box; включает в размер всё, кроме margin'ов (все padding, border и content). Мне изначально показалось, что htmlbook допустил ошибку в описании. А в целом очень здорово и доходчиво. Я уже не один курс просмотрел, потому перематываю половину уроков, но новые мелкие, немаловажные детали узнаю именно от вас. Спасибо.
было, о о нем говорил, напомнил , ещё о нем говорили в прошлом уроке. тебе че , все на блюдце преподносить, учишся верстать, так учись, и додумывай сам, я по кд, при начале урока, вписываю *{b.s-b.b}
Мир Css так прекрасен 1 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. 2 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал . 3 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. 4 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. 4 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Мир Css так прекрасен CSS body{ background: yellow; } .test1{ width: 100%; min-height: 100px; text-align: center; } .test2{ width: 65%; min-height: 200px; background: green; float: left; box-sizing: border-box; } .test3{ width: 35%; min-height: 200px; background: grey; float: left; box-sizing: border-box; margin-bottom: 55px; } .test4{ width: 33.3%; min-height: 100px; background: #234; float: left; box-sizing: border-box; } .test5{ width: 33.3%; min-height: 100px; background: #656; float: left; box-sizing: border-box; } .test6{ width: 33.3%; min-height: 100px; background: #543; float: left; box-sizing: border-box; margin-bottom: 55px; } .test7{ width: 100%; min-height: 10px; background: red; float: left; text-align: center; }
наверное, имелось в виду чуть по-другому скомпоновать атрибуты, не дублировать их, а перечислить тэги и разово прописать к ним общие атрибуты в данном случае это float и box-sizing. Автору спасибо, отлично объясняет базу.
Ьыл случай на домашнем задании блок sidebar налез на блок content тот что справа , после значения float:left и никакие команды не помагают отлепить блоки ни float;none , clear;both, и box-exizing не помог тоже. Так вот, файле html просто незабудьте закрыть правильно , иначе будете создавать блоки в блоке и пытатся их отлепить)
А как сделать, чтобы высота блока была фикс? Адаптивности немного нехватает моим блокам. Когда сжимаю страницу, то блоки уже из-за текста немного разнятся в высоте. Напр вторая строка блок 2 и 3, где 65% +35% соотв. Не помню как это можно поправить..
А еще не получается добавить межблочное расстояние. Пробую через margin, но так понимаю, надо еще вычитать от % блока, чтобы все вошло в границу окна. В общем получается применить только margin-bottom: 1px; тогда ничего не едет. А если напр. margin-right: 1px; то уже все блоки по горизонт едут.... далекооо ))
Андрей,спасибо за урок, но у меня проблемка,сделал всё как нужно но не могу сделать отступы справа и слева ибо box-sizing как я понял не учитывает внешние отступы margin или отступы межу блоками слева и справа не нужны?
Застрял, я с этим заданием. Меняю значит размеры с десятыми. Как и Андрей задал: 33,3%. А оно ничего не меняется, на всю ширину страницы, злой, второй день сижу ищу причину))) А оказывается нужно писать целое число, без десятых. Когда дошло до меня, было смешно)
Тяжело float и div даётся, уже не первого учителя смотрю и вот вроде сделал ДЗ, но уверен что что-то не так. Может кто покритикует: Наследование в CSS Домашнее задание по Float Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Спасибо за внимание!!! CSS: .title { text-align: center; min-height: 70px; background-color: black; color: white; margin: auto; } p { padding: 5px; float: left; min-height: 200px; } div p.first { box-sizing: border-box; max-width: 65%; } div p.second { box-sizing: border-box; max-width: 35%; } div img { max-height: 300px; width: 500px; margin-top: -10px; box-sizing: border-box; max-width: 33.3%; float: left; margin-bottom: 30px; } div footer { width: 100%; text-align: center; float: left; } В любом случае спасибо автору канала за такие прекрасные видео-уроки, только по ним и учусь в основном!!!
Андрей, спасибо. Скажите будет ли видео с подробной настройкой пользовательского интерфейса того же Notepad с рассмотрением вопроса установки различных плагинов, упрощающих и ускоряющих работу с кодом. Спасибо.
вопрос: почему , если несколько обьединить одним и задать {fload : left} то вся верстка что в artikle схлопывается в лево. А если fload задавать отдельно в каждом div то все нормально?
@@andrievskii еще не совсем понятно как работает box-sizing; border box, потому что при попытке сделать отступы по 5px вокруг каждого блока, верстка слетает и блоки пляшут по экрану как хотят, хотя , как я понял, эта функция должна учитывать учитывать эти отступы. Но с этим вопросом, наверное лучше курить матчасть.
@@andrievskii div 1 div2 div3 div4 div5 div6 div7 такая же запись допустима? Я же могу через тег artikle задавать одинаковые свойства сразу для всех контейнеров?
Здравствуйте! Решил скорректировать немного заданное Вами дз - добавить заголовки 1ого и 2ого уровня, но не меняя заданной структуры расположения блоков. 1ый после header'а , 2ой после блоков 65% и 35% ширины. По итогу , используя упомянутые в уроке свойства блоки расположились не на одной высоте - ступенчатому виду. Блок 35% ширины ниже блока 65% ширины, таким же образом поехали блоки 33.3% ширины - каждый ниже другого слева направо. Заметил одну особенность , если убрать заголовок(заголовки), то всё выстраивается как в видеоуроке. Как быть в такой ситуации?
Если бы я объяснял все, что вам придется использовать в верстке, курс был бы на полгода и не 20 уроков, а 150. Вторая задача каждого, кто учится программированию, гуглить все, что тебе не знакомо. Первая задача, иметь желание учиться!!!
@@ЕвгенийШершов забросьте файл в песочницу и напишите, что конкретно не получается, и лучше вопрос задавать в телеграм чате, там быстрее ответят (ссылка в описании под роликами)
Здравствуйте, хотел спросить у вас, я выполнил домашнее задание, и у меня возникла такая проблема. В последнем диве у меня не работает " margin-top". А если я для тех трёх блоков поставлю " margin-bottom", тогда работает. Почему так!
Скажите пожалуйста, если я min-height хочу указать не в пикселях, а в процентах, то такой способ почему-то не работает. С чем это связано? Мне хотелось бы заполнить дивовом пустую часть экрана, но так как разрешение на всех мониторах разное, то в писелях как то неправильно так указывать. Как быть в такой ситуации? Спасибо.
Example16 Самы главный заголовок! Пытаюсь сделать САМ! 1.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisciomnis iste natus error sit voluptatem velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Стараюсь не подсматривать 2.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Пока не получается 3.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Вроде получаеся 4.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Надеюсь не аляписто 5.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Но я же учусь 7.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Полезная информация: Google Yandex SportBox Mail CSS body{ background: #ffff99; margin-top: 0px; } h3{ text-align: center; background: #fffff9; margin: 0 22%; border-radius: 10px; } h1{ text-align: center; font-size: 2.8em; font-family: Arial, Elvetica, sans-serif; text-decoration: underline; background: grey; margin: 0 25%; border: 1px solid #fffff9; border-radius: 0 0 15px 15px; } h2{ text-align: center; background: #fffff9; margin: 0 22%; border-radius: 10px; } div{ box-sizing: border-box; border: 1px solid #fff; float: left; width: 50%; padding: 15px; } h2.first{ margin: 0 35%; } #fl{ width: 49.75%; box-sizing: border-box; clear: both; background:grey; } #head{ min-height: 100px; margin: 0.5% 0; box-sizing: border-box; width: 100%; background: grey; } #last{ margin-top: 5px; background:grey; box-sizing: border-box; width: 33%; margin-left: 0.5%; min-height: 164px; } #sl{ margin-top: 5px; background:grey; box-sizing: border-box; width: 33%; margin-right: 0.5%; } #sc{ margin-top: 5px; background:grey; box-sizing: border-box; width: 33%; } #sr{ display: inline-block; min-height: 100px; background:grey; box-sizing: border-box; clear: both; width: 100%; margin-top: 5px; margin-bottom: 5px; } #fr{ width: 49.75%; background:grey; margin-left: 0.5%; } #block{ width: 33%; margin-left: 0.5%; margin-top: 5px; background:grey; box-sizing: border-box; min-height: 164px; } a{ text-decoration: none; color: #000; } a:hover{ /*color: #fff; background: #000;*/ } li{ font-size: 1.5em; display: inline-block; background: #ffff99; border-radius: 5px; margin-right: 5px; padding: 0 5px; } ol{ text-align: center; margin: 10px 0%; }
Андрей, здравствуйте, вы не могли бы пожалуйста посмотреть на мою вёрстку? Кроме вас не к кому обратиться просто. (html ниже, а css в ответе на мой коммент) (картинка - куб в формате png 200 на 200. Верстал с помощью browser-sync и плагина emmet для sublime text 3- в целом управился минут за 10. Браузер мой - мозила. Писал без ресетера, кстати стоит ли использовать ресетер сейчас в 2019?) Или уже существуют более удобные методы сброса? Вот мой html: Домашка Заголовок для сайта Это слева должно быть-хы!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugiat earum deleniti repellat corporis aspernatur delectus perspiciatis vel necessitatibus sunt veritatis magnam in repudiandae facere ab nam, voluptas, consectetur inventore, sint fugit nemo hic? Repudiandae deserunt iusto veniam, nesciunt non. Ну а это справаLorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugiat earum deleniti repellat corporis aspernatur delectus perspiciatis vel necessitatibus sunt veritatis magnam in repudiandae facere ab nam, voluptas, consectetur inventore, sint fugit nemo hic? Repudiandae deserunt iusto veniam, nesciunt non. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugiat earum deleniti repellat corporis aspernatur delectus perspiciatis vel necessitatibus sunt veritatis magnam in repudiandae facere ab nam, voluptas, consectetur inventore, sint fugit nemo hic? Repudiandae deserunt iusto veniam, nesciunt non.
мб кто нибудь поможет? когда height прописываю в % ничего не меняется а когда в px то все ок и граница меняет свою высоту. Вот пример мой .block1{ border: 1px solid yellow; padding: 20px; width: 60%; margin: 10px 10px 10px 0px; height: 200px;
Лучший из всех . Есть моменты где материал устарел для 2022 -го года, для разметки элементов используйте "flex "либо через "Grid" вместе "flout" - та он устарел уже .
Добрый день! Спасибо огромное за ваши уроки, очень понятно и познавательно. Возник один вопрос по дз, надеюсь, сможете подсказать. Ссылка на код jsfiddle.net/rdzke41x/ Если в стилях из div убрать width:100%, то все уползает непонятно куда. Не понимаю, почему так, если в классах ниже (div.test1 итд) прописана уже ширина для каждого блока
что-то все пишут с div class .наверное чтото пропустил я.но чето я этого не вижу,хотя пересматриваю уже несколько раз. в итоге создал как на видео через каждого абзаца,задавая где ему находиться.проблема получается,когда задаешь параметры 65% и 35 % ширины-высоты разные у них образуются,так как набор символов остался тот же,а размер пространства уменьшился.приходится использовать overfloat and max-height как проходили.сжимаем второй абзац и просматриваем через скрол.однако изза того что мы задаем border .границы получаются нечеткие,приходится подтирать-я не знаю,может так и надо.но в итоге ,там где сделали 35 процентов ширину скролить,граница сбоку не обводится,как результат ,там где мы задавали ширину 33 процента снизу граница border не доходит до конца изза того что над ней наш скрол. что делать... p { width:33%; box-sizing:border-box; font-size:22px; border:2px solid black; float:left; margin:0px; border-right:none; padding:3px; text-indent:10px; } p.qw { width:66%; border-bottom:none; border-right:none; } p.as { width:34%; overflow:auto; max-height:310.5px; border-bottom:none; } p:first-letter { color:red; } footer { border:2px solid black; }
Кто может помогите. Почему если создать блоки как в домашнем задании, каждому из у этих блоков задать стиль float: left; и попытаться все эти блоки запихнуть внутрь одного div'а и этому div'у попробовать прописать border то бордер будет рисоваться так как-будто внутри div'а ничего нет. Ниже попробую скинуть содержимое html/css HTML: test это голова 100% ширины это тело №1 65% ширины это тело №2 35% ширины это колени 33.333333% ширины это колени 33.333333% ширины это колени 33.333333% ширины это футер 100% ширины CSS: /*font-family: 'Sriracha', cursive; для заголовков*/ /*font-family: 'Oswald', sans-serif; для обычного текса*/ body{ margin: auto; font-size: 16px; } .section{ max-width: 1000px; min-width: 500px; word-wrap: break-word; margin: auto; color: white; text-align: left; border: 2px solid black; font-family: 'Oswald', sans-serif; box-sizing: border-box; } div.golova{ text-align: center; width: 100%; background: blue; border:1px solid red; box-sizing: border-box; float: left; } div.telo_1{ width: 65%; text-align: center; background: blue; border:1px solid red; float: left; box-sizing: border-box; } div.telo_2{ text-align: center; width: 35%; background: blue; float: left; border:1px solid red; box-sizing: border-box; } div.koleni{ text-align: center; width: 33.33333333%; background: blue; float: left; border:1px solid red; box-sizing: border-box; } div.footer{ text-align: center; width: 100%; float: left; background: blue; border:1px solid red; box-sizing: border-box; } h1{ font-family: 'Sriracha', cursive; } prntscr.com/r3losn - скриншот сего чуда XD. Черная тонкая полосочка в самом верху скриншота это background div'а с классом .section
Додумался сам, в последнем блоке вместо float: left; прописываем clear: left; Тем самым последний блок становится по центру, и его внешний див не обтекает, соответственно background натягивается на весь главный div
Document title Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi. Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Rerum ea voluptatibus neque adipisci soluta amet odit illo laboriosam maxime aperiam. Atque pariatur dolorem cupiditate ipsum modi doloribus, minima maxime laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum commodi ducimus similique autem libero animi, beatae repellat ipsa earum reiciendis, at, consectetur necessitatibus, minima est aliquid laudantium? Numquam, aspernatur, odit?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque nemo labore repudiandae tenetur! Repudiandae, numquam, mollitia. Perspiciatis minima eveniet quisquam dolores ullam sapiente quidem cum, deserunt similique vitae libero eos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque nemo labore repudiandae tenetur! Repudiandae, numquam, mollitia. Perspiciatis minima eveniet quisquam dolores ullam sapiente quidem cum, deserunt similique vitae libero eos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque nemo labore repudiandae tenetur! Repudiandae, numquam, mollitia. Perspiciatis minima eveniet quisquam dolores ullam sapiente quidem cum, deserunt similique vitae libero eos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi. CSS div{ float:left; min-height: 150px; margin-top: 10px; } div.qw{ width: 100%; box-sizing: border-box; border: 1px solid black; padding: 10px; } div.we{ width: 65%; box-sizing: border-box; border: 1px solid black; padding: 10px; } div.er{ width: 35%; box-sizing: border-box; border: 1px solid black; padding: 10px; } div.as{ width: 33.3%; box-sizing: border-box; border: 1px solid black; padding: 10px; } div.sd{ width: 33.3%; box-sizing: border-box; border: 1px solid black; padding: 10px; } div.zx{ width: 33.3%; box-sizing: border-box; border: 1px solid black; padding: 10px; } div.xc{ width: 100%; box-sizing: border-box; border: 1px solid black; padding: 10px;
