Question

我有一段时间绕着这一个缠着我的脑袋。我在这里要做的是创建一个直接的3列布局，有点扭曲。我希望中心“内容”栏能够永远居中于屏幕上。右侧的列是固定宽度，但我希望左侧的列是流动的。目的是左侧列中的徽标将调整大小以容纳980px宽屏幕，而不会妨碍徽标的任何部分，但我还希望最大450px用于更大分辨率的屏幕。

---------------------------------------------------------------------------------
| Fluid, image     |                                       |                    |
| inside resizes   |           Content column              | Nav column         |
| max-width: 450px |           fixed width: 600px          | fixed width: 200px |
| min-width: 180px |                                       |                    |
---------------------------------------------------------------------------------

这是我能够完成的最好的，但这是一个非常复杂的方法，具有负边距。通过完成左列的方式，我不能保持“内容”列实际上居中。

有什么建议吗？谢谢！

jfiddle

Answer 1

如果您使用display:table，则可以访问表格布局的属性而无需使用。{/ p>

然后应该很容易得到一些接近你想要的东西： http://jsfiddle.net/v5yP3/4/

html {
    background: yellow;
}
#wrapper {
    margin: 0 auto;
    max-width: 1250px;
    min-width: 980px;
    background: #fff;
    display:table;
}
#leftcolumn, #rightcolumn {
    display:table-cell;
    width:450px;
}
#rightcolumn {
    width:200px;
}
#contentcolumn {
    display:table-cell;
    width: 600px;
    background: blue;
}
img {
    width:180px;
    min-width: 100%;
    vertical-align:top;
}

编辑：固定右列宽度

Answer 2

如果您不完全关注IE9 compatibility，我强烈建议您使用flexbox来显示列。

HTML：

<div class='container'>
    <div class='column left'>left</div>
    <div class='column middle'>middle</div>
    <div class='column right'>right</div>
</div>

css（样式已删除）：

body,
html {
    height: 100%;    
}

.container {
    display: flex;
    height: 100%;
    width: 100%;
}

.left {
    min-width: 180px;
    max-width: 450px;
    width: 100%;
}

.middle {
    flex-shrink: 0;
    width: 600px;
}

.right {
    flex-shrink: 0;
    width: 200px;
}

JSFiddle（带样式）：http://jsfiddle.net/379MA/

如果您想了解有关flexbox的更多信息，我建议使用css-tricks指南：

可在此处找到有关flexbox的综合指南：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS 3列布局，流体左列，居中和固定中间列，右列固定

2 个答案: