div中的段落，em不起作用

#div {
  width: 200px;
}
#p1 {
  width: 0.5em;
}
#p2 {
  width: 0.2em;
}

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

I want to set p1 to 50% of div and p2 to 20% of div using em but it does not seem to change anything. How should I make this work? Thanks.

我想使用em将p1设置为div的50％，将p2设置为div的20％，但它似乎没有任何改变。我该怎么做才能做到这一点？谢谢。

6 个解决方案

#1

If you want to set the paragraphs to percentages of the parent, you should use percentages in your css. Em's are a length unit relative to font size, not to it's parent width, or height. http://www.w3schools.com/cssref/css_units.asp

如果要将段落设置为父项的百分比，则应在css中使用百分比。 Em是相对于字体大小的长度单位，而不是它的父宽度或高度。 http://www.w3schools.com/cssref/css_units.asp

If you also want the paragraphs to appear next to eachother, add "display: inline-block;"

如果您还希望段落出现在彼此旁边，请添加“display：inline-block;”

#div {
  width: 200px;
  background: silver;
}
#p1 {
  display: inline-block;
  width: 50%;
  background: green;
}
#p2 {
  display: inline-block;
  width: 20%;
  background: red;
   }

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

#2

em unit is relative to the font-size of the element. So the width you set 0.5em will be half of the font-size of the parent. If not set, it will take 16px as default. If DIV font-size is set to 20px, its children P sets width: 0.5em means 10px width. Same is happening in your example, P1 is set with 8px width since its taking 16px default font-size of the container.

em单位是相对于元素的字体大小。因此，您设置0.5em的宽度将是父级字体大小的一半。如果未设置，则默认需要16px。如果DIV font-size设置为20px，则其子P设置宽度：0.5em表示10px宽度。在您的示例中也发生了相同的情况，P1设置为8px宽度，因为它采用容器的16px默认字体大小。

So try using % unit if you want children to size themselves according to parent container.

因此，如果您希望子项根据父容器调整大小，请尝试使用％unit。

#3

Conversions based on 16px browser default size

基于16px浏览器默认大小的转换

You need to give div to 1em so that your child elements can have width accordingly. Try changing 50% to 0.5em as below, it will give same result

您需要将div赋予1em，以便您的子元素可以相应地具有宽度。尝试将50％更改为0.5em，如下所示，它会得到相同的结果

#div {
  width: 1em;
}
#p1 {
  width: 50%;
  background-color : red
}
#p2 {
  width: 0.2em;
}

要么

#div {
      width: 1em;
    }
    #p1 {
      width: 0.5em;
      background-color : red
    }
    #p2 {
      width: 0.2em;
    }

For more please also check PXtoEM

有关更多信息，请同时查看PXtoEM

Hope it will help !!

希望它会有所帮助!!

#4

#div {
  vm: 1%;
  border:1px solid #000;
  display:block;
}
#p1 {
  width: 50%;
  display:inline-block;
  border:1px solid red;
  margin-left:10px;
}
#p2 {
  width: 20%;
  display:inline-block;
   border:1px solid red;
}

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

#5

-1

You need to add display:inline-block;

你需要添加display：inline-block;

#div {
  width: 200px;
}
#p1 {
  width: 0.5em;
  display:inline-block;
}
#p2 {
  width: 0.2em;
  display:inline-block;
}

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

#6

-1

P is not a container, must havn't width stylements (use divs for this job, as divs are containers) so it must work as this:

P不是容器，必须没有宽度样式（使用div作为此作业，因为div是容器）所以它必须如下工作：

#div {
  width: 200px;
}
#p1 {
  width: 1.5em;
  border:1px solid blue;
}
#p2 {
  width: 1em;
  border:1px solid red;
}

<body>
  <div id="div">
    <div id="p1">
      <p>p1 - lorem ipsum dolor sit amet</p>
    </div>
    <div id="p2">
      <p>p2 - lorem ipsum dolor sit amet</p>
    </div>
  </div>
</body>

Note that if you set container width under p size, it will overflow (as it's elemental, dear Whatson).

请注意，如果您将容器宽度设置为p大小，它将溢出（因为它是元素，亲爱的Whatson）。

#1