CSS PX到百分比

时间:2014-03-20 01:06:00

标签: html css percentage

好的,所以这个问题似乎已被问过几次,但仍然无法通过查看其他问题得到简单明了的答案,所以我会以自己的方式提出这个问题。我想在CSS中使用容器创建一个站点,如下所示:

.container {
     height: 100%;
     margin: 0 auto;
     width: 980px;
}

然而,对于宽度,我想要使用一个百分比,但在我的生命中,我找不到一个简单的答案,甚至找不到将PX转换为%的网站,甚至只是为了得到使用百分比的答案代替980px或960px?是62.5%还是70%?

有人可以帮我解决这个问题并回答这个简单的问题,或者至少给我一个我可以通过转换查看的网站,就在任何人用PX到EM网站回答之前,我已经看了它并且不清楚,因为该网站更适合字体大小。

感谢能够回答此问题的任何人!

3 个答案:

答案 0 :(得分:16)

我讨厌打破它,但你可能会有一些人在这里盯着你看。

百分比是相对于父容器大小的百分比。 50%表示“父母宽度的一半”。 没有“px-%”转换,因为一个是固定值而另一个是灵活比率。那是......有点为什么你找不到任何这样的东西。

答案 1 :(得分:6)

问题:要以百分比形式获取子元素,

  1. A)儿童宽度:例如。 760px
  2. B)父宽度:例如。 1,024像素x
  3. 使用JQuery可以轻松获得父或子宽度。 例如:$('#parent').width()

    然后应用此数学运算来获取子元素的百分比值:
    (A / B)* 100

    代替:
    (760/1024) * 100 = 74.22% ..因此解决了。

答案 2 :(得分:0)

不是从像素转换为百分比 尝试以百分比获取元素的尺寸 例子

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;