a!max Опубликовано 16 мая, 2017 Поделиться Опубликовано 16 мая, 2017 Здравствуйте. Имеются два блока: красный и синий. Изначально, синий блок находится под красным. <!DOCTYPE HTML> <html> <head> <title>TEST</title> </head> <body> <style> #block1, #block2 { display: block; width: 200px; height: 200px; } #block1 { background: red; } #block2 { background: blue; } </style> <div id="block1"></div> <div id="block2"></div> </body> </html> Мне нужно сделать так, чтобы нижний синий блок был справа от красного вверху, т.е. они должны быть вместе по горизонтали. Я сделал так: <!DOCTYPE HTML> <html> <head> <title>TEST</title> </head> <body> <style> #block1, #block2 { display: block; width: 200px; height: 200px; } #block1 { background: red; margin-bottom: -200px; } #block2 { background: blue; margin-left: 200px; } </style> <div id="block1"></div> <div id="block2"></div> </body> </html> Вопрос: Есть ли способ сделать это(разместить блоки (div) рядом по горизонтали) легче с помощью html или css ? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
andros0789 Опубликовано 16 мая, 2017 Поделиться Опубликовано 16 мая, 2017 35 минут назад, maxaent сказал: легче с помощью html или css ? Попробуйте только через HTMLЯ так просто не умею. Интересно просто. PS Конечно же через css Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
jack007 Опубликовано 16 мая, 2017 Поделиться Опубликовано 16 мая, 2017 Через css <!DOCTYPE HTML> <html> <head> <title>TEST</title> </head> <body> <style> .block1 { padding: 5px; float: left; width: 200px; } .block2 { padding: 5px; float: left; width: 200px; } </style> <div class="block1"> Текст 111111 </div> <div class="block2"> Текст 22222 </div> </body> </html> Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
a!max Опубликовано 17 мая, 2017 Автор Поделиться Опубликовано 17 мая, 2017 18 часов назад, jack007 сказал: Через css <!DOCTYPE HTML> <html> <head> <title>TEST</title> </head> <body> <style> .block1 { padding: 5px; float: left; width: 200px; } .block2 { padding: 5px; float: left; width: 200px; } </style> <div class="block1"> Текст 111111 </div> <div class="block2"> Текст 22222 </div> </body> </html> Тоже так пробовал, не получалось, я просто ставил только для 1го блока float, не знал, что для обоих надо обтекание ставить. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.