如何将中间列移动到左列？答案

【问题标题】：How can I move the middle column to the left column?如何将中间列移动到左列？
【发布时间】：2012-12-18 15:16:44
【问题描述】：

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

基本上我想要

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

这是迄今为止我所能达到的最接近...

我正在尝试避免使用 JavaScript。使用 JS 一切都很简单……但我真的不想仅仅为了一些定位而依赖它。不保证用户启用它。

【问题讨论】：

标签： html css css-float positioning

【解决方案1】：

您不能仅使用 CSS 来做到这一点。您需要使用 JavaScript 来计算剩余空间。在以下示例中，中间 div 为 100px，左侧为 33%，右侧为剩余空间的 67%。使用查询，您可以做到

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/查看工作示例

【讨论】：

我想我应该提到我试图避免使用 JS……你确定没有这不可能吗？
为什么？我已经让所有 div 的大小都正确，我只需要一些浮动/绝对定位魔法就可以将它们放在正确的位置。
@mark，这就是问题所在，您需要中间 div 为 100px 而不是左侧 div + 2 个其他 div 嵌套在另一个 div 中，就像您在示例中那样。我们需要计算剩余空间，然后给每个部分它所需的百分比。
我的意思是，如果将所有固定宽度的 div 放在一侧，然后将所有 %-width div 包装在将填充的父 div 中，则不需要“计算”任何东西剩余空间。我希望然后我可以将这个父 div 之外的 div 浮动到正确的位置。我可能可以使用绝对定位或边距来做到这一点，但是固定宽度的 div 需要知道 %-width div 的实际宽度才能正确设置边距。也许……我还有一件事可以尝试。否则，这让我很难过，我们甚至无法使用 CSS3 定位这样的东西？
如果您必须只使用 HTML/CSS，您可以使用表格。您还可以查看 display:table 和 display:table-cell CSS 属性，了解如何使 div 像表格一样，但这不适用于所有浏览器。

【解决方案2】：

哈！解决了。而你们却说做不到！

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

我不得不复制 100px 的 div，但不涉及 Javascript。

【讨论】：

这将在 IE6 中中断，如果您调整窗口大小也会中断。我给你的解决方案是跨浏览器兼容的
为容器设置一个最小宽度，这样它就不会损坏。如果有人使用 IE6 浏览互联网，他们就不能期望获得完美的体验。
@Dan：在哪一个？拥有一切的黑色？我相信只有当 33% 小于 100 像素时才会出现问题。