3列布局：中间列有最大宽度，右列是动态的

Question

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

• 左栏：宽度为23％
• 中间栏：宽度为43.5％，最大宽度为550px
• 右栏：动态（延伸到容器宽度）

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

Answer 1

在你提出问题后我开始尝试大约30分钟，然后放弃了，但是在最后一个float上没有div的想法（感谢@MrAlien）使我的例子工作：{ {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
}