Задать вопрос
@EdOther
Student - Programmer
html

Блоки мешают друг другу, как исправить?

Собственно вот код (не весь)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <header>
       <div class="box">
        <h1>Product name</h1>
            <div class="list_h">
                <ul>
                    <li>Put on this page information about your product</li>
                    <li>A detailed description of your product</li>
                    <li>Tell us about the advantages and merits</li>
                    <li>Associate the page with the payment system</li>
                </ul>
            </div>
        <div class="banner">
            <img src="../image/banner.png">
        </div>
        </div>
    </header>
</body>
</html>


Блоки box, list_h, мешают разместить блок banner справа.

Как у меня 98d6d81b6653493cb9ce19b7b7a7a98c.png

Как должно получится 26763b34d79047cc9275c24a9d762965.png
  • Вопрос задан
  • 560 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
NN-webmaster
@NN-webmaster
Обожаю веб
Если это отдельный блок на странице, то сделайте два блока с display:inline-block, задайте им ширину по 50% (или иное соотношение) и вертикальное выравнивание сверху. В один блок поместите список с заголовком, в другой - картинку.
Ответ написан
Комментировать
Комментировать
@sgrinko
я сделал бы вот так 

.holder { overflow:hidden;}
.banner { float:right;}

<div class="holder">
        <div class="banner">
           <img src="../image/banner.png">
        </div>
        <div class="box">
            <h1>Product name</h1>
            <div class="list_h">
                <ul>
                    <li>Put on this page information about your product</li>
                    <li>A detailed description of your product</li>
                    <li>Tell us about the advantages and merits</li>
                    <li>Associate the page with the payment system</li>
                </ul>
            </div>
        </div>
 </div>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Копия форума на XenForo 2 + автоматический парсинг нового контента
26 нояб. 2024, в 17:25
30000 руб./за проект
SЕО продвижение сайта в топ 1
26 нояб. 2024, в 16:51
1000 руб./за проект
Сделатьт дизайн лендига и сверстать его на Тильде
26 нояб. 2024, в 16:49
30000 руб./за проект
Ещё заказы