1

ここの緑の領域が、緑と青の領域の間の水平方向の白い領域全体を埋めるようにします。問題は、その属性に何を置くべきかわからないことです。width現在はです500px。

<article id="chat">
</article>
<aside id="channel-attendees">
</aside>

chat左のバー、channel-attendees右のバーです。

#chat {
    background: green;
    float: left;
    height: 500px;
    width: 500px;
}

#channel-attendees {
    background: blue;
    float: right;
    width: 200px;
    height: 500px;
}
4

3 に答える 3

1

緑の幅を90％に変更し、青の幅を左の幅を10％フロートに変更すると、すべてのタイプのモニターで機能するはずです;）

#chat {
    background: none repeat scroll 0 0 green;
    float: left;
    height: 500px;
    width: 90%;
}


#channel-attendees {
    background: none repeat scroll 0 0 blue;
    float: left;
    height: 500px;
    width: 10%;
}
于 2013-03-25T23:04:04.487 に答える
1

緑の領域を柔軟にし、幅が固定された青の領域にしたい場合は、緑のブロックからフロートと幅を削除する必要があります。また、値=青のブロック幅の緑のブロックにmargin-rightを追加する必要があります。

#chat {
background: green;  
height: 500px;   
margin-right: 200px;
}

そして、緑の前に青のブロックを置きます。

 <body>
  <header>
    <a href="#"><img src="img/icon256.png"></a>
        <div id="menu">
            <div id="user">
                <img id="user-avatar" src="img/avatar.jpg">
                <span id="user-name">Michael</span>
            </div>
        </div>
    </header>
    <div id="channels">
    </div>
    <aside id="channel-attendees">
    </aside><article id="chat">
    </article> 
</body>
于 2013-03-25T23:12:21.157 に答える
0

使用するのではなく、widthこれを試してください：

#chat {
  background: green;
  float: left;
  height: 500px;
  position: absolute;
  right: 200px;
  left: 0;
}
于 2013-03-25T23:03:29.560 に答える