在两个按钮之间定位div

Question

我尝试使用一些按钮进行遥控，并使用现在在其中两个按钮之间播放信息的div。

但它没有用。

正如您所看到的，在实际的ipad上，它呈现的方式不同，我不知道如何修复它。

HTML：

<div id="buttons">
<button id="prev" class="control" onmousedown="skip('prev')"></button>
    <div id="info"> gfegrbhthehrerhg</div>
<button id="next" class="control" onmousedown="skip('next')"></button><br />


<button id="rwd" class="control" onmousedown="changeSpeed(-2)"></button>
<button id="stop" class="control" onmousedown="emitCommand('stop')"></button>
<button id="play" class="control" onmousedown="emitCommand('play: loop: true speed: 100')"></button>
<button id="ffwd" class="control" onmousedown="changeSpeed(2)"></button>

的CSS：

button.control {
    display: inline-block;
    width:150px;
    height:150px;
    background-size: 150px 150px;
    border:0;
    margin: 0.5%;
}

div#info {
    width:300px;
    height: 150px;
    margin: 0 1.1%;
    position: relative;
    top: -58px;
    margin-bottom: -50px;
    border:1px solid red;
    display: inline-block;
}

button#prev {
    margin-left: 160px;
}

button#rwd {
    margin-left: 160px;
}


#buttons {
    margin: 0 auto;
    border: 1px solid lightgray;
}

我做错了什么？完成此任务的正确方法是什么？ 感谢

Answer 1

添加

vertical-align: top;至div#info

并从top: -58px;

中删除div#info

以下是工作示例的链接：EXAMPLE LINK

Answer 2

使用简单的4x2网格系统：

＆＃13;

＆＃13;

#buttonsWrapper {
  margin: 0 auto;
  border: 1px solid #BC5555;
  height: 300px;
  width: 600px;
}

.col4{width: 100%; float: left;}
.col3{width: 75%; float: left;}
.col2{width: 50%; float: left;}
.col1{width: 25%; float: left;}
.col1-height{height: 0; padding-bottom: 25%;} /* make 25% width squared */

.row{
  clear: both;
}

#prev, #next, #rwd, #stop, #play, #ffwd{
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-color: #888;
  -webkit-transform: scale(0.95,0.95); /* Safari */ /* scale down to 95% */
  transform: scale(0.95,0.95); /* scale down to 95% */
}

#info{
  background-color: #ddd;
}

＆＃13;

<div id="buttonsWrapper">
  <div class="row">
    <div id="prev" class="col1 col1-height"></div>
    <div id="info" class="col2 col1-height"></div>
    <div id="next" class="col1 col1-height"></div>
  </div>
  <div class="row">
    <div id="rwd" class="col1 col1-height"></div>
    <div id="stop" class="col1 col1-height"></div>
    <div id="play" class="col1 col1-height"></div>
    <div id="ffwd" class="col1 col1-height"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;