5

我有 3 个 div，#left、#center 和 #right，我想将它们定位在具有特定宽度的同一行上，比如 300px。

#left 和 #right 的内容很少，比如每个 50px，我将它们完全展示出来。

#center 有很多内容，比如说 400px，我想在行的剩余空间内尽可能多地显示。为此，我将#center 的内容包含在#inner 中。

我已将#left 和#center 浮动到左侧，将#right 浮动到右侧。

<div id="left">
    LEFT
</div>
<div id="center">
    <div id="inner">
        LONG CONTENT ...
    </div>
</div>
<div id="right">
    RIGHT
</div>

示例小提琴

问题1：有没有办法让#center div通过CSS占据线上所有可用的剩余空间（在我们的例子中，#center必须是200px宽 - 线的宽度，300px，减去宽度#left 和 #right，每个 50px) ?

问题2：我没有通过CSS找到解决方案，我使用jQuery动态计算剩余可用空间。这在除 IE9 之外的所有浏览器中都可以正常工作。

IE9 的问题在于它具有亚像素精度，而 jQuery 只返回元素尺寸的整数值。

这是一个示例：IE9 将 #left 视为具有 50.5px 的宽度，而 jQuery 将其视为具有 50px 的宽度。这种差异导致布局在 IE9 中中断。

如果我需要通过 JavaScript 计算可用空间，我该怎么做才能克服这个 IE9 问题？

4

3 回答 3

1

为了将来参考，我所做的是将 IE9 视为浮点数的宽度强制为 jQuery 视为整数的值：

var elem = $("#element");
elem.css("width", elem.width());

如果#element 有一个被IE9 视为50.5px 的值，jQuery 会强制在它上面设置一个jQuery 看到的值，50px。

于 2012-05-07T06:36:14.183 回答
0

试试这个：

main = $("#main").width();
centerWidth = main - ( $("#left").width() + $("#right").width() );
$("#center").width(centerWidth);

或者：

main = parseFloat(document.getElementById("main").style.width)
centerWidth = main - (parseFloat(document.getElementById("left").style.width) + parseFloat(document.getElementById("right").style.width));
document.getElementById("center").style.width = centerWidth + "px"
于 2012-05-06T15:59:52.460 回答
0

我的解决方案：

el = $('#myelement');

//Hello IE9-10 and float "width", e.g. 83.41px;
try {
  var elWidth = Math.ceil(parseFloat(getComputedStyle(el[0]).width)); 
} 
//But old browser doesn't know "getComputedStyle()" e.g. IE 8 and oldest;
catch (e) {
  var elWidth = el.width(); 
}

elWidth; //IE 9-10 return 84px, other browsers 83px;
于 2013-08-08T11:15:06.467 回答