html - 3列レイアウトサイドカラム弾性ミドル固定

Question

中央のdivの幅を固定し、中央のdivの両側に左右のdivを弾性にする方法を誰かが知っているかどうか疑問に思いました。中央に配置されたdivには、min-widthプロパティとmax-widthcssプロパティもあります。

Answer 1

質問を投稿するときに試したコードを追加してみてください。

HTML

<div class = "container">
    <div class = "fluid">
        I am fluid
    </div>

    <div class = "fixed">
        I'm Fixed! 
    </div>

    <div class = "fluid">        
        I am fluid
    </div>
</div>

CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
    text-align: center;
}
.fixed {
    min-width: 200px; max-width:300px;
    background: rgb(34, 177, 77);
    color: white;
}
.fluid {
    background: rgb(0, 162, 232);
}
​

デモリンク