填充水平空间

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

来源

2013-03-25 poitroae

为什么不用百分比表示宽度？ I.E. 80％（绿色），20％（蓝色）？ – 2013-03-25 23:03:52

我认为它是/看起来更好，如果侧边栏始终保持相同的宽度（就像facebook侧边栏例如） – poitroae 2013-03-25 23:06:27

好吧，那么一些解决方案可能是捕捉窗口的JS宽度，减去200px，并将结果应用到绿色领域:) – 2013-03-25 23:08:10

而不是使用width试试这个：

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

来源

2013-03-25 23:03:29

更改绿色宽度，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-25 23:04:04 Nat

不，我希望它的宽度恰好是200px：D – poitroae 2013-03-25 23:04:29

哦1秒我的不好^^如果你想让整个背景变成绿色，那么只要将背景设置为绿色，并在蓝色上使用绝对位置并将宽度设置为200px，如上面的“mattedgod”所示！如果你不希望整个背景在div中绿色环绕，只是将div背景设置为绿色 – Nat 2013-03-25 23:05:05

那么，为什么你不这么说？ ;） – 2013-03-25 23:05:44

如果你想在绿地面积要灵活，并与固定宽度的，你只需要从绿色块去除浮动和宽度蓝色区域，也需要保证金右添加到绿色块值=蓝色块宽度。

#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-25 23:12:21

填充水平空间

回答

相关问题