html - 3 列布局 : middle col have max width, 右列是动态的

Question

是否可以在没有 javascript 的情况下创建这样的 CSS 布局？

• 左栏:宽度为 23%
• 中间列:宽度为 43.5%，最大宽度为 550px
• 右栏:动态(延伸至容器宽度)

主要问题是中间列的最大宽度。不知道如何使右列动态化，并在其宽度达到最大值时将其粘贴到中间列的右边缘。

Answer 1

我在你提出问题后大约 30 分钟开始试验，然后放弃了，但在最后一个 div 上没有 float 的想法(感谢@MrAlien)使我的示例工作:http://jsfiddle.net/6pJJt/3/ .

HTML:

<div id="col1" class="column">Column 1</div>
<div id="col2" class="column">Column 2</div>
<div id="col3" class="column">Column 3</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}
.column {
    height: 100%;
    float: left
}
#col1 {
    width: 23%;
    background: red
}
#col2 {
    width: 43.5%;
    max-width: 550px;
    background: orange
}
#col3 {
    width: 100%;
    background: yellow;
    float: none
}