填充水平空间

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

将绿色宽度更改为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%;
}

如果你想让绿色区域是灵活的，蓝色区域有固定的宽度，你只需要从绿色块中移除浮动和宽度，你还需要在绿色块中添加margin-right, value = blue block width

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

与其使用width，不如试试这个:

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

相关内容

最新更新

热门标签：