文字是對自身

頂部堆疊我有我的introtext 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>

來源

2016-10-01 Pieter

刪除浮動：左和位置從.bluetext相對因爲不需要它。剩下的一個jsfiddle會很有用。 –

如果代碼是作爲堆棧片段提供的，爲什麼jsfiddle有用？ – andreas

你的浮動和定位在這裏沒有必要（在給定的代碼的情況下至少）。刪除loat: left;和position: relative;和p標記將表現正常。

要使p標籤不再重疊，請指定線高度，例如， line-height: 12pt;。也許他們繼承了其中一位父母的line-height:0。

旁註：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>

來源

2016-10-01 15:32:16 andreas

不幸的是沒有成功:(還是有同樣的問題，我刪除了P標籤和SPAN標籤中的所有浮點和位置規格，但文本仍然在彼此之間運行。 – Pieter

好的另一種可能性是「寬度：80％」 - 你有沒有特別說明或者用'100％'試過？ – andreas

只是試圖用100％仍然在彼此之上有沒有辦法上傳圖片，然後我可以告訴你我的意思 – Pieter

文字是對自身

回答

相關問題