Question

我无法使以下三列布局正常工作：

    A              B              C
+-------+-------------------+------------+
|       |                   |            |
| Fixed | Use unused space  |  Resizable |
|       |                   |            |
+-------+-------------------+------------+

其中：

A 是固定宽度。
B 使用A和C列未使用的容器中的任何可用空间。
C 包含可能会改变宽度并需要将B“推”到a的内容不同的宽度。

以下是我创建此项目的最佳尝试： http://jsfiddle.net/x3ESz/

我所看到的所有其他主题都建议将所有三个主题与B一起浮动，使用边距来防止包装，但这不允许C根据C的内容调整B的大小（因为必须给出B的权利值）余量）。

我也非常想避免使用JS来实现这一目标。

Answer 1

这可以通过adding overflow: hidden到#div_middle轻松解决并删除边距：

#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}

请参阅： http://jsfiddle.net/thirtydot/x3ESz/1/

这适用于所有现代浏览器和IE7 +。

Answer 2

如果您使用此脚本，则可以在不更改布局的情况下修复它：

$(document).ready(function() {
    $('#div_right').click(function() {
        $(this).append('--');
        $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px");
    });
});

Answer 3

甚至可以同时使用两个可变宽度的侧边栏：

http://jsfiddle.net/QG2EU/

#div_left{
    float:left;
    border:1px solid #F00;
}
#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}
#div_right {
    float:right;
    border:1px solid #00F;
}

三列CSS布局 - 固定/最大/可变宽度

3 个答案: