css - 如何使子 div 在 HTML 中填充其父 div 的所有剩余水平空间？

Question

这个结构是：

<div id='container'>
    <div id='play'>▶&lt;/div>
    <div id='res'>RES</div>
    <div id='bar'>test</div>
    <div id='time'>0</div>
</div>

样式是：

对于#container

 #container
{backgroundColor:'#CCCCCC',
position:'absolute',
bottom:'-40px',
width:'100%',
height:'40px'}

对于按钮 #res 和 #bar

#res , #bar
 {width:30px; 
 height:30px; 
 border:1px solid #DDDDDD; 
 margin:5px; 
 font-weight:bold; 
 cursor:pointer; 
 float:left}

#时间

#time
 {float:'left',fontSize:'16px',margin:'12px 5px'}

注意：容器的容器宽度（占 100% 的位置）会发生动态变化。

如何将CSS设置为#bar div填充其他div剩余的所有空间？

score 1 · Accepted Answer

您在上面发布了不完整的代码。它的格式也不正确（css）。

但是我“认为”如果您删除 inner 上的 css float<div>并改为让它们display: inline-block;，您应该能够width:在 inner 上声明 CSS 百分比<div>并让它们填充您的容器。

score 0 · Accepted Answer

0

<div>您可以在底部添加另一个<div id='time'>并设置样式clear:both

于 2012-09-23T08:47:09.127 回答

score 0 · Accepted Answer

我无法以令人满意的方式使用 CSS 来做到这一点，所以我添加了一个 JavaScript 来监听调整大小的尝试，这将在数学上保持正确的大小。

3 回答 3