текста стеки поверх себя

Question

У меня есть странные проблемы внутри моего Вступительного DIV У меня есть некоторые p тегов с текстом внутри того, что у меня есть несколько пролетов, чтобы дать определенные словам подсвеченного цвета.

Однако теперь мой текст буквально один на один, у кого-то есть идея, что вызывает это?

.wrapper { 
 
    width: 100%; 
 
    position: relative; 
 
    float: left; 
 
    height: auto; 
 
} 
 
.bluetxt { 
 
    color: #0084FF; 
 
    float: left; 
 
    position: relative; 
 
    float: left; 
 
} 
 
#introheader { 
 
    position: relative; 
 
    float: left; 
 
    font-family: alternate; 
 
    font-size: 1.0vw; 
 
    margin-top: 5%; 
 
    font-weight: 800; 
 
} 
 
#introtxt { 
 
    font-family: alternate; 
 
    font-size: 0.7vw; 
 
    margin-top: 4%; 
 
    position: relative; 
 
    float: left; 
 
    width: 80%; 
 
    text-align: left; 
 
}

<div class="wrapper"> 
 
    <p id="introheader"><span class="bluetxt">LEO CLUB DE 4 AMBACHTEN</span> 
 
    </p> 
 
    <p id="introtxt"><span class="bluetxt">Leo club de 4 ambachten</span> is een servicevereniging of serviceclub voor enthousiaste jongvolwassenen (18-33) uit de regio Gent-Zelzate (BE) en Zeeuws-Vlaanderen (NL). De leden organiseren <span class="bluetxt">fundraisers</span> en 
 
    ondersteunen met de opbrengst daarvan <span class="bluetxt">sociale projecten</span>. Op die manier krijgen de leden de kans om zichzelf te ontplooien en belangrijke vaardigheden te ontwikkelen. 
 
    </p> 
 
</div>

Answer 1

Ваш плавучие и позиционирование не надо здесь (по крайней мере, в контексте вашего данного кода). Удалите loat: left; и position: relative;, а теги p будут вести себя как обычно.

Чтобы метки тега p больше не перекрывались, укажите высоту строки, например. line-height: 12pt;. Возможно, они наследуют line-height:0 от одного из родителей.

Sidenote: Размер шрифта в vw очень необычен. Лучше укажите его как px или pt и используйте media queries, чтобы сделать шрифт отзывчивым.

.wrapper { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.bluetxt { 
 
    color: #0084FF; 
 
} 
 
#introheader { 
 
    font-family: alternate; 
 
    font-size: 12pt; 
 
    margin-top: 5%; 
 
    font-weight: 800; 
 
} 
 
#introtxt { 
 
    font-family: alternate; 
 
    font-size: 10pt; 
 
    margin-top: 4%; 
 
    width: 80%; 
 
    text-align: left; 
 
}

<div class="wrapper"> 
 
    <p id="introheader"><span class="bluetxt">LEO CLUB DE 4 AMBACHTEN</span> 
 
    </p> 
 
    <p id="introtxt"><span class="bluetxt">Leo club de 4 ambachten</span> is een servicevereniging of serviceclub voor enthousiaste jongvolwassenen (18-33) uit de regio Gent-Zelzate (BE) en Zeeuws-Vlaanderen (NL). De leden organiseren <span class="bluetxt">fundraisers</span> en 
 
    ondersteunen met de opbrengst daarvan <span class="bluetxt">sociale projecten</span>. Op die manier krijgen de leden de kans om zichzelf te ontplooien en belangrijke vaardigheden te ontwikkelen. 
 
    </p> 
 
</div>