Question

我正在寻找一个3列css布局，中间有1个固定部分，周围有2个流体边栏：

http://www.uploadup.com/di-UEFI.png

中间宽度为250px（例如），侧边栏（最小）宽度为150px。如果浏览器宽度超过550px（250 + 300），则侧边栏应具有更长的宽度。（中间总是250px）

什么是CSS可以做到的？兼容所有浏览器。

注意：我看到了this page，但我不知道如何为了我的愿望而改变它

Answer 1

您可以尝试使用inline-block。它们的使用相当少，但有时它们对布局非常有用。

所以，看看这个：http://jsfiddle.net/kizu/UUzE9/ - 使用inline-block，您可以使用任意数量的固定列和流体列创建布局。算法：

首先，将填充等于所有固定列的总和添加到包装器中。在您的情况下 - 250px。
然后，将min-width添加到包装器中，等于所有流体列的最小宽度之和。
然后，将white-space: nowrap添加到包装器中，这样列就不会跳转。
然后只需添加所需的所有列。

如果您需要支持IE7及更低版本，除了常见的inline-block修复之外，还有一些其他的事情要知道：

您必须将white-space: normal返回到列的内部子项，否则列不会保留在一行中。
IE中可能会出现幻像滚动，也许有更好的方法可以删除它，但我只是在某个包装上使用overflow: hidden。

享受：）

Answer 2

要在没有JavaScript的情况下在IE6 / 7中使用，最简单的方法是使用table。

我知道，我知道。在这种情况下，不好，都考虑过了。

请参阅： http://jsfiddle.net/thirtydot/Q2Qxz/

在IE6 / 7 + Chrome中测试过，它可以在所有其他现代浏览器中使用。

<强> HTML：

<table id="container" cellspacing="0" cellpadding="0">
    <tr>
        <td id="left">fluid</td>
        <td id="mid">fixed</td>
        <td id="right">fluid</td>
    </tr>
</table>

<强> CSS：

html, body {
    margin: 0;
    padding: 0;
    border: 0
}
#container {
    border: 0;
    table-layout: fixed;
    width: 100%
}
#container td {
    vertical-align: top
}
#mid {
    width: 250px;
    background: #ccc
}
#left {
    background: #f0f
}
#right {
    background: #f0f
}

Answer 3

如果你没有使用其中一个准备好的模板，
你可以从左边三个div开始，中间有宽度：250px，外边有 min-width: 150px
您可能希望将其替换为<section>标记，只需将其设为display: block

即可

如何创建3柱流体固定流体布局？

3 个答案: