0

デザインの質問があります。ビデオプレーヤーのプログレスバーを作成する必要があります。PLAY、STOP、プログレスバー、VOLUME、その他のボタンに関するすべてのdivが横に並んだ（左に浮いている）divコンテナー（id videoManager ）があります。

プログレスバー（id playerSlider）のdivのサイズを残りのスペースに応じて変更したいのですが。このコードを書き留めましたが、「幅：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;
   }

これは私のサイトへのリンクです。

4

1 に答える 1

0

この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;
}
于 2013-02-09T13:22:49.320 に答える