html - 如何将中间列移动到左列？

Question

http://jsfiddle.net/mnbayazit/zfBPQ/1/

本质上我想要

[ 剩余空间的 33% | 100 像素 |剩余名额的 67%]

这是我到目前为止所能达到的最接近...

---

我试图避免使用 JavaScript。使用 JS 一切都很简单......但我真的不想仅仅依靠它来进行一些定位。不保证用户会启用它。

Answer 1

单靠 CSS 无法做到这一点。您需要使用 JavaScript 来计算剩余空间。在下面的例子中，中间的 div 是 100px，左边是 33%，右边是剩余空间的 67%。使用 Query 你可以做

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1').css('width', rem * 0.33);
    $('.div3').css('width', rem * 0.67);
}
calc();
$(window).resize(calc);

在 http://jsfiddle.net/HpJXk/ 查看工作示例