@EdOther
Student - Programmer

Как поднять текст если тэг мешает?

Скажу сразу, я новичок, и только учусь верстке...
Вот код :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>Minimal</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" >
</head>
<body>
    <header>
    <img class="logo-img" src="image/logo.png">
    <div class="logo-menu">
        <nav>
                    <a href="#about">Products</a>
                    <a href="#services">Services</a>
                    <a href="#contact">Contact</a>
        </nav>
    </div>
<section id="about" >
        <div class="box">
                <img class="phone" src="image/iphone.png">
                <img class="ico" src="image/world.png">
                <h1>APP OF<br>THE YEAR</h1>
        </div>
</section>
<section id="services" > 

</section>
    </header>
</body>
</html>

Так должно получится - fd4fb0a3659c458bbb0ce1b547821967.png
У меня получилось так - 1ce7726452044171b265c1d4363e5568.png
  • Вопрос задан
  • 762 просмотра
Решения вопроса 2
alone_lion1987
@alone_lion1987
Веб-разработчик
.ico {
float: left;
}

.clear {
clear: both;
}


После див с классом box добавить сразу:

<div class="clear"></div>

Смысл в том, чтобы задать float:left; 2 элементам, которые предполагаются располагаться рядом, картинке и надписи, чтобы были на одном уровне, а потом отменить обтекание, чтобы не порушить верстку ниже
Ответ написан
@Neyury
h1 блочный элемент, поэтому он занимает всю строчку. Пропишите ему display: inline-block;, чтобы он начал вести себя как блочно-строчный элемент. При необходимости нужно так же указать vertical-align: top;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы