【问题标题】:Error with computed size of relative-size HTML elements in javascriptjavascript中相对大小HTML元素的计算大小错误
【发布时间】:2013-05-09 12:19:03
【问题描述】:

我的窗口对象的宽度为 1361 像素。

容器 div 的宽度设置为 90%,理论上是 1224.9px。

但是,它的计算大小 ( $("#mycontainer").width() ) 返回 1225px。仅供参考,计算出的数字似乎来自浏览器本身,而不是 jQuery。

现在的问题是,如果我在其中放置两个浮动 div,分别为 1000px 和 225px,它们将不适合同一行,据称是因为 1225px > 1224.9px。至少在 FF 和 Chrome 中,没有在其他地方测试过。

如果我将容器设置为 1225 像素的固定大小,那么两个 div 将回到同一行,这在我看来证实了浏览器不使用上舍入计算的大小来知道实际有多少空间可供儿童占用。

我想知道是否有人知道如何解决这个问题。我什至不确定如何获得容器的百分比大小来自己做数学:

var width = Math.floor($(window).width * $("#mycontainer").percentageWidth() / 100)

【问题讨论】:

  • 除非你有理由不这样做,否则将容器内 div 的像素值转换为百分比值是有意义的。
  • 其实是有原因的,我里面其实有两个以上的div,有些是固定宽度的,不是相对的。

标签: javascript css size percentage computed-style


【解决方案1】:

CSS display: flex; 是当今解决这些怪癖的好方法。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-09-12
    • 2013-01-24
    • 1970-01-01
    • 2013-04-20
    • 2020-03-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多