Question

我希望这里的绿色区域填充绿色区域和蓝色区域之间的整个水平白色区域。问题是我不知道我应该在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;
}

Answer 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%;
}

Answer 2

如果您希望绿色区域具有灵活性并且蓝色区域具有固定宽度，则只需要从绿色块中移除浮动和宽度，您还需要将边距右侧添加到值为蓝色块宽度的绿色块。

#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>

Answer 3

而不是使用width试试这个：

#chat {
  background: green;
  float: left;
  height: 500px;
  position: absolute;
  right: 200px;
  left: 0;
}

填充水平空间

3 个答案: