Братцы, выручайте. Как сделать нормально расположение блоков, чтоб допустим при увеличени они ни куда не разъезжались, это во первых, во вторых разместить под img блок, чтоб он четко было под ним, а не под каким-то другим, потому что я когда размещаю блок под картинкой он размещается прям под этими двумя, тем самым оставляя место под картинкой (3 изображение) пришлось маргином минусовать вверх и 3 блок расположить справа от этих двух, можно ли этого как-то избежать и написать правильно, помогите пожалуйста) (1 картинка как надо сделать) (2 картинка как сейчас сделал код снизу) HTML: <div class="parket"> <div class="uslugi-content"> <img class="ukrashatel" src="humans.png" alt="Строительные услуги"> <div class="uslugi-stroi">Услуги по строительству <ul> <li>Строительство домов и бань из бревна и бруса <li>Строительство заборов: монолитных, кирпичных. деревянных, из проф-листа, сетки рабицы <li>Капитальный ремонт и отделка квартир, загородных домов, офисов, промышленных помещений <li>Ремонт-отделка санузлов под ключ <li>Отдельные виды работ: сантехнические, плиточные, вентиляционные, сварные, электромонтажные, столярно-плотницкие работы, монтаж сантехнических предметов, подвесных потолков сложных конструкций, кладочные штукатурные и малярные работы высокого уровня. <li>Выезд на объект для составления сметы <li>Подготовительные работы – корчевка деревьев, удаление плодородного слоя, вертикальная планировка участка. <li>Работы нулевого цикла – геодезические работы, рытье котлована и траншей, прокладка коммуникаций. <li>Бетонные работы – заливка фундамента, устройство бетонных площадок, сооружение бетонных перекрытий, сооружение бассейнов. <li>Общестроительные работы – возведение несущих стен и перегородок из бревен/бруса/кирпича/шлакоблоков, устройство полов и перекрытий. <li>Кровельные работы – монтаж стропильной системы, монтаж гидро/пароизоляции, настил любого(!) кровельного покрытия, устройство вентиляции подкрышного пространства, установка дымоходов и вентиляционных труб и пр. <li>Сантехнические работы – прокладка труб, установка арматуры, ванн, унитазов, раковин, душевых кабин, устройств доочистки воды. <li>Электромонтажные работы – монтаж электрощита, прокладка электросети, монтаж распределительных коробок, установка УЗО, монтаж выключателей, розеток, стационарных осветительных приборов. <li>Отделочные работы – штукатурка, настил полов, монтаж потолков, установка встроенных шкафов, дверей, оконных рам, облицовочные работы – обои/дерево/керамика/мозаика. <li>Сопутствующий сервис – сооружение печей и каминов, благоустройство территории, строительство навесов, такелажные работы <li>Постройка по вашему индивидульному проекту </ul> </div> <div class="uslugi-vse">Мы выполняем все виды строительных и ремонтных работ, от возведения домов и косметического ремонта до сооружения и благоустройства территории. Предоставляемые строительные услуги характеризуются безупречным качеством работы. Квалификация и многолетний опыт позволяют предложить вам не только низкие цены, но и безукоризненное качество выполненных работ. Комплекс строительных услуг включает в себя все аспекты: подготовительные работы, сооружение фундамента, возведение стен, в том числе из бревна или бруса, монтаж кровли и отделка помещений. Степень архитектурной сложности значения не имеет – квалификация позволяет работать с любыми объектами. Наряду с капитальным строительством, мы можем предложить строительные услуги локального характера: электромонтажные и сантехнические работы, строительство заборов, косметический ремонт отдельных помещений и т.п. </div> </div> </div> [CSS] /*Uslugi*/ .parket { background: #ffffff url(derevo.jpg) center top; background-size: cover; height: auto; padding: 0px; margin: 0px; } .parket .uslugi-content { width: 1200px; height: auto; margin: 0 auto; } .parket .uslugi-content .ukrashatel { width: 400px; height: 700px; border-left: 4px solid #00ab00; border-right: 4px solid #00ab00; float: left; } .parket .uslugi-content .uslugi-vse { width: 370px; height: auto; background: rgba(128, 128, 128, 0.7); color: white; font-family: arial; padding: 15px; text-align: justify; border: 4px solid #00ab00; } .parket .uslugi-content .uslugi-stroi { width: 502px; height: auto; background: rgba(0, 0, 0, 0.7); color: white; font-family: Arial; font-size: 34px; padding: 20px; border-right: 4px solid #00ab00; display: inline-block; } .uslugi-stroi li { color: grey; font-size: 18px; font-family: Arial; margin-bottom: 5px; } /* Uslugi end */ [/CSS]
Пример - https://codepen.io/bologer/pen/MvvozK?editors=1100 Дальше используешь CSS свойство @media для того, чтобы корректировать дизайн под нужные размеры экранов
