Question

我想创建一个布局，其结构是混合类型。我想要两个侧边栏：一个在左侧，另一个在右侧 - 两个都有250px的宽度;在中间，我只想要宽度适中的内容。

我可以用一些数学来解决我的问题，比如calc(100% - 500px)，但我真的不想使用CSS3 - 我想要一个跨浏览器的解决方案，它可以是纯CSS2或JavaScript。 / p>

有人可以给我一些建议吗？它可以是网格系统，功能等。

Answer 1

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

CSS

.left{
    width: 250px;
    position: absolute;
    left: 0;
}
.center{
    display: table;
    position: absolute;
    left: 250px;
    right: 250px;
}
.right
    width: 250px;
    position: absolute;
    right: 0;
}

Answer 2

获取文档宽度：
var documentWidth = $(document).width();
删除'px'：
documentWidth = documentWidth.split('px')[0];
计算中间div的宽度：
var middleDivWidth = documentWidth - 500;
将计算出的宽度设置为中间div：
$('#middleDivId').css('width',middleDivWidth+'px');

Answer 3

CSS：

.div1 {
    width: 250px;
    float: left;
}
.div2 {
    overflow: hidden;
    width: auto;
    float:left;
}
.div3 {
    width: 250px;
    float: right;
}

JSFIDDLE

3网格布局：固定侧边栏和流体内容

3 个答案: