0

私は3列のdivに取り組んでいます。Left 列と Mid 列は、幅 1005 ピクセルのラッパー内で固定幅 (それぞれ 57 ピクセルと 160 ピクセル) です。

問題は、流動的な幅である必要があり、残りのすべてのスペースをカバーする右側の列です。使ってみましたがうまくいきませwidth: (calc 100% - 217px);ん。

参考までにこのコードを用意しました。何が悪いのか指摘するためにあなたの助けが必要です。

body {
    background-color: #444;
    margin: 0;
}
#wrapper {
     width: 1005px;
     min-height:450px;
     margin: 0 auto;
}
#leftcolumn, #rightcolumn, #mid {
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 57px;
     background-color: #111;
}
#mid {
     width: 160px;
     background-color: #087;
}
#rightcolumn {
     max-width: calc (100% - 217px);
     background-color: #777;
     display:inline-block;
}
<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id=mid>
        Mid
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

http://jsfiddle.net/8weSA/1434/

4

4 に答える 4

0

  1. calcとの間のスペースを削除してください(100% - 217px);

    max-width: calc (100% - 217px);それは間違っています。

    max-width: calc(100% - 217px);あたりです。

  2. 分割するために使用width:100%し#rightcolumnます。

私のデモにアクセスしてください... jsfiddleで

于 2015-04-12T05:31:48.787 に答える