Question

我已经创建了一个视频播放器控件，但我想知道如何使其响应，只使擦洗器移动但播放按钮或音量按钮保持在同一位置并保持相同的距离？

CSS

#videoControls{
  height:8%;
  top:92%;
  width:100%;
  background-color:#d92a2e;
  background-color: rgba(0,0,0,0.4);
  position:relative;
  -webkit-transition: top .5s ease-in;
  -moz-transition: top .5s ease-in;
  -ms-transition: top .5s ease-in;
  -o-transition: top .5s ease-in;
  transition: top .5s ease-in;
}

[class^="col-"] ,[class*= " col-"]{
  position: relative;
  top: 50%;
  float: left;
}

.col-80{
  width: 80%;
}

.col-7-5{
  width: 32px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.col-7-6{
  width: 7.5%;
}

.col-5{
  width: 5%;
}

HTML 的

<div class='controls' id='videoControls'>
  <div class='col-5'>
    <div class='btnGrp'>
      <div id='play' class='playBtn'></div>
      <div id='pause' class='pauseBtn'></div>
    </div>
  </div>
  <div class='col-80'>
    <div id='scrubber'>
      <div id='track'></div>
      <div id='handle' class='draggable'></div>
      <div id='handle2' class=''></div>
    </div>
  </div>
  <div class='col-7-5'>
    <div class='btnGrp'>
      <div id='mute' class='muteBtn'></div>
      <div id='unmute' class='unmuteBtn'></div>
    </div>
  </div>
  <div class='col-7-6'>
    <div id='timeDisplay'>
      <span id='currentTime'></span>
      &nbsp;&sol;&nbsp;
      <span id='duration'></span>
    </div>
  </div>
</div>

Answer 1

如果您在重新调整浏览器大小时有多个div，我已创建了响应式设计吗？

以下是我的html结构：

    <div id="div-wrap">

            <div class="column-1-7"> ... </div>

            <div class="column-2-7"> ... </div>

            <div class="column-3-7"> ... </div>

   </div>

以下是我的css结构：

#div-wrap {
    white-space: nowrap;
    max-width: 100%;
}

.column-1-7,.column-2-7,.column-3-7 {
    width: calc(100% / 3);
    display: inline-block;
    text-align: center;

}

.column-1-7{
    background: #ffcc00;
}
.column-2-7{
    background: #ffff00;
}
.column-3-7{
    background: #ffccff;
}

如何使多个div内联响应？

1 个答案: