1

メイン コンテナに 2 つの div を並べて作成しようとしています。下部の div は、残りのスペースの幅に合わせる必要があります。

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>

#container {
    float:left;
    width:100%;
}
#left, #right {
    padding:50px;
    background: #ccc;
    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}

#right {
    padding:20px;
    background:#000;
    color:#fff;
}

私はこの段階で立ち往生していますhttp://jsfiddle.net/Z9qW3/7/

4

4 に答える 4

1 
#container
{
   overflow-x:hidden
}
#left
{
width:20%;
float:left;
position:fixed;
border:1px solid red
}
#right
{
width:80%;
float:right;
position:absolute;
left:20%;
bottom:0;
border:1px solid red
}
于 2013-09-26T09:18:51.673 に答える
0

このコードを試してください:

デモ

CSS

#left
{
width:20%;float:left;position:fixed;left:0px;
border:1px solid yellow;
}
#right
{
width:80%;float:right;
border:1px solid red;
}

html

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>
于 2013-09-26T08:33:42.003 に答える
-1

あなたの質問から私が得ることができるのは、左側に固定divが必要であり、他のdivは右側と左側のdivの下部に残りのスペースを取る必要があるということです。より良いアプローチは、単一の大きな div を作成し、左側に固定 div をフロートし、残りの部分を使用して、css ポジショニング プロパティを使用して個々の要素を配置することだと思います

于 2013-09-26T09:02:44.783 に答える