html - 3 列のレイアウト: 中央の列は最大幅、右の列は動的

Question

このような CSS レイアウトを JavaScript なしで作成することは可能ですか?

• 左の列: 幅は 23%
• 中央の列: 幅は 43.5%、最大幅は 550px
• 右の列: 動的 (コンテナの幅に合わせて伸縮)

主な問題は、中央の列の最大幅にあります。右の列を動的にして、幅が最大値に達した場合に中央の列の右端に固定する方法がわかりません。

Answer 1

あなたが質問をしてから約30分後に実験を開始し、あきらめましたがfloat、最後divに（@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
}