Question

你能不能告诉我为什么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;
}

Answer 1

namespace boost {
namespace serialization {

template<class Archive>
void serialize(Archive & ar, Point2d & p, const unsigned int version)
{
    ar & p.x;
    ar & p.y;
}
} // namespace serialization
} // namespace boost

Plunker Demo

Answer 2

我已经在这里给你一个解决方案：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>

Answer 3

使用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;
}

为什么P标记没有占据行的整个高度？

3 个答案: