Question

我有一个设计问题。我需要为视频播放器创建一个进度条。我有一个div容器（id videoManager ），其中包含关于PLAY，STOP，进度条，VOLUME，其他按钮的所有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;
}

div容器内div的自动宽度

1 个答案: