1 
<div id="IWillShareTheRemainingWidthWithTheRightOne">left stuff</div>
<div id="IAmAFixedWidth">center stuff </div>
<div id="IWillShareTheRemainingWidthWithTheLeftOne">right stuff</div>

左と右は、利用可能な残りのスペースをすべて占有します

ここにいる他の誰かがこの質問をしました。彼は左右に背景を設定するだけでよいので、提案された解決策が彼のために機能しました。私の場合、左右のdivにコンテンツを配置する必要があります。

また、左が固定され、右が残りのスペースを占めるソリューションも見ました。幅と中央が固定されたままの左右の解決策もいくつか見つかりました。

しかし、私は必要なものを正確に見つけていません。

4

2 に答える 2

1

私はこの場所で解決策を見つけました 何年も前にそれをやったポールと呼ばれる誰かがそれについてここでブログを書きました

これがjsfiddleです

<div id="IWillShareTheRemainingWidthWithTheRightOne">stuff on left</div>
<div id="IAmAFixedWidth">stuff on center</div>
<div id="IWillShareTheRemainingWidthWithTheLeftOne"> 
    <div id="insideOf3rd">    
        stuff on right
    </div>
</div>


#IAmAFixedWidth {
    width:100px;
    background:green;
    display:inline-block
}

#IWillShareTheRemainingWidthWithTheRightOne {
width:50%;
margin-right:-50px;
background:magenta;
float:left;
}

#IWillShareTheRemainingWidthWithTheLeftOne {
width:50%;
margin-left:-60px;
background:magenta;
float:right;
}

#insideOf3rd {
margin-left:50px;
}
于 2013-01-18T22:18:15.690 に答える
0

div にインライン ブロック css を与えます。 

div{display:inline-block;}
#IAmAFixedWidth {
    width:100px;
    background:green;
}

http://jsfiddle.net/DugGC/5/

編集：
これを試してください： 

    div{display:table-cell; background: orange; }
    #content{width:550px; background: black; display: table}
    #IAmAFixedWidth {
        width:100px;
        background:green;
    }

http://jsfiddle.net/DugGC/6/

于 2013-01-18T16:25:45.730 に答える