html - div 容器内 div 的自动宽度

Question

我有一个设计问题。我需要为视频播放器创建一个进度条。我有一个 div 容器 (id videoManager )，其中包含有关 PLAY、STOP、进度条、VOLUME、其他按钮的所有 div，所有这些都在另一个旁边（向左浮动）。

我希望进度条的 div（id playerSlider）根据剩余空间调整大小。我写下了这段代码，但如果使用“宽度：100%；” 对于这个 div，它没有得到剩余的空间，而是 100% 的容器。建议？

HTML：

<div id="videoManager">
  <div id="playpauseCommand">Play</div>
  <div id="stopCommand">Stop</div>
  <div id="playerSlider">
    <div id="objSlider"></div>
  </div>
  <div id="timeElement">10:12:12</div>
  <div id="volumeSlider"></div>
  <div id="displayCommand">Command</div>
</div>

CSS：

div#videoManager{
   margin-top: 30px;
   width: 980px;
   height: 44px;
   background: transparent url('bg.jpg') center center repeat-x;
   position: relative;
   color: #fff;
}
   div#playpauseCommand, div#stopCommand{
      width: 44px;
      height: 44px;
      float: left;
      border-right: 2px solid #555;
   }
   div#playerSlider{
      float:left;
      height: 44px;
      width: 100%;
      padding: 15px 10px 0px 10px;
   }
      div#objectSlider{
         float: left;
         clear: left;
         width: 100%;
      }
   div#timeElement{
      float: left;
      height: 44px;
      width: 80px;
      border-right: 2px solid #555;
   }
   div#volumeSlider{
      float: left;
      height: 44px;
      width: 180px;
      border-right: 2px solid #555;
   }
   div#displayCommand{
      float: left;
      height: 44px;
      width: 70px;
      border-right: 2px solid #555;
   }

这是我网站的链接。

Answer 1

试试这个css代码，但不确定这是否正是你想要的：

div#videoManager{
margin-top: 30px;
width: 980px;
height: 44px;
background: transparent url('bg.jpg') center center repeat-x;
position: relative;
color: #fff;
}
div#playpauseCommand, div#stopCommand{
  width: 44px;
  height: 44px;
  float: left;
  border-right: 2px solid #555;
}
div#playerSlider{
  float:left;
  height: 44px;
  width: 53%;
  padding: 15px 10px 0px 10px;
 position:absolute;
 left:178px;
}
 div#objectSlider{
     float: left;
     clear: left;
     width: 100%;
  }
div#timeElement{
  float: left;
  height: 44px;
  width: 80px;
  border-right: 2px solid #555;
}
div#volumeSlider{
  float: right;
  height: 44px;
  width: 180px;
  border-right: 2px solid #555;
}
div#displayCommand{
  float: right;
  height: 34px;
   width: 70px;
 top:10px;
  border-right: 2px solid #555;
position:relative;
}