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

Question

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

我希望进度条的 div (id playerSlider) 根据剩余空间调整大小。我写下了这段代码，但如果使用“width: 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;
   }

这是一个链接to my site .

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