为啥 P 标签不占用行的整个高度？

Posted 2023-03-06

【中文标题】为啥 P 标签不占用行的整个高度？

【英文标题】：why P tag not taking whole height of row?为什么 P 标签不占用行的整个高度？

【发布时间】：2015-09-18 12:47:18

【问题描述】：

你能告诉我为什么 P 标签不占用整个行高吗？实际上我的行中有 p 标签，其中的文本是“P”，只有背景颜色为浅蓝色。它没有占用整个行高如图所示？ 我将尝试用其他语言进行更多解释。

我正在尝试制作一行，如图所示。它在图像“左”一个中有“P”文本。它没有占据整个行高，如图所示 我在右侧有一个圆圈，它在“650”内有一些文字。它没有显示在中心为什么？

笨蛋

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;

【参考方案1】：

.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

【讨论】：

请检查图像 .."P" 的背景颜色为蓝色，没有像图像中给出的那样占据全高

正确 90%。我有一个问题是响应式的吗？意思是它适用于所有屏幕分辨率..其次“P”在您的演示中有一些边距，但在法师中没有左边距..我们可以从左边给零边距

我只是使用了你的代码......坦率地说，我不会像你那样做......但测试一下并玩。 plnkr.co/edit/thI2W82Qp9GkCXVVokM9?p=preview 是响应式的吗？...不是固定像素值。

如果你得到这个你会怎么做？我没有使用任何像素平均静态值。我正在接受 %

让我们continue this discussion in chat.

【参考方案2】：

使用 text-align: center 和 line-height 将 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;

【参考方案3】：

我已经在这里给了你一个解决方案：how to create row in angular js?

在另一个问题中，您似乎要求行 div 及其所有子项根据屏幕分辨率动态调整大小。

在 plunker 中，您没有提供外部 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>