Question

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

#left和#right的内容很少，比如50px，我正在完全展示它们。

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

我已将#left和#center向左移动，＃right向右移动。

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

Example fiddle

问题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问题？

Answer 1

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

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

如果#element的IE9看到的值为50.5px，则jQuery会强制jQuery看到的值为50px。

Answer 2

试试这个：

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"

Answer 3

我的解决方案：

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;

动态元素宽度和IE9子像素精度

3 个答案: