爲什麼P標籤不佔用整行高度？

可否請您告訴我爲什麼P標籤沒有佔用整行高度？事實上，我在我的行中有p標籤，其中文本是「P」只有背景顏色淺藍色。它不佔用整行高度如圖所示？我會嘗試解釋更多的換句話說。爲什麼P標籤不佔用整行高度？

我試圖做一個行作爲圖像顯示。它有像「P」文字「左」的一個。它沒有采取行整體高度在圖像顯示
我有一個圓在右邊是「650」裏面有一些文字，它不在中心顯示爲什麼？

plunker

http://plnkr.co/edit/ilmNaeyjFZCcSnb2PWcO?p=preview

.bg { 
    background: lightgray; 
    position: relative; 
} 
.ptag { 
    position: absolute; 
    margin-left: -7%; 
    width: 7%; 
    border: 1px solid red; 
    height: 100%; 
    background: lightblue; 
    color: white; 
} 
.circle{ 
    width: 50px; 
    height: 50px; 
    float: right; 
    border-radius: 100%; 
    background: green; 
    margin-top: -7%; 
    color:black!important; 
}

來源

2015-07-01 user944513

.ptag { 
    position: absolute; 
    top:0; /* set at top */ 
    margin-left: -7%; 
    width: 7%; 
    border: 1px solid red; 
    height: 100%; 
    background: lightblue; 
    color: white; 
    text-align: center; 
} 
.circle{ 
    width: 50px; 
    height: 50px; 
    float: right; 
    border-radius: 100%; 
    background: green; 
    margin-top: -7%; 
    color:black!important; 
    text-align: center; 
    line-height: 50px; /* same as height */ 
}

Plunker Demo

來源

2015-07-01 11:36:46

請形象。「P」爲背景色的藍色不採取充分的高度，在圖像 – user944513

更正的鏈接中給出。 –

正確90％。我有一個問題是否有反應？意思是它可以在所有屏幕分辨率上工作..其次「P」在你的演示中有一定的餘量，但在法師中沒有左邊距..我們可以從左邊的零邊距 – user944513

使用文本對齊：中心和行高到中心內部DIV的文本。

你糾正這裏的CSS：

.ptag { 
    position: absolute; 
    margin-left: -7%; 
    width: 7%; 
    border: 1px solid red; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
    background: lightblue; 
    color: white; 
} 
.circle{ 
    width: 50px; 
    height: 50px; 
    float: right; 
    border-radius: 100%; 
    background: green; 
    margin-top: -7%; 
    text-align: center; 
    line-height: 50px; 
    color:black!important; 
}

來源

2015-07-01 11:37:49

我已經給了你這裏的解決方案：how to create row in angular js?

在你出現的另一個問題是問該行的div和它的所有兒童動態大小基於屏幕分辨率。

在蹲在你沒有給外部CSS因此我粘貼在那裏的解決方案，這裏有內聯的CSS。以下將使包含P的div爲100％高度，其餘內容爲「動態」，因爲它們在不同的分辨率屏幕上保持其縱橫比。

包括更新plunker：http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=preview

<div class="" style="height: 30vw; position:relative; width: 100%;"> 
    <div style="float: left;background: gray; height:100%; width: 10%; text-align:center;"> 
    <div style=" position:relative; top:40%;">P</div> 
    </div> 
    <h2>16000389</h2> 
    <p>RutherFord & Alfanso Company Lmt</p> 

    <div style="border: 1px solid black;float: right;background: green;border-radius: 100%;width: 20vw; height: 20vw;position:absolute; top:20%; text-align:center; right:10%"> 
    <div style=" position:relative; top:30%;">650</div> 
    </div> 

</div>

來源

2015-07-01 11:47:13

爲什麼P標籤不佔用整行高度？

回答

相關問題