在两个按钮之间放置 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

并从 div#info 中删除 top: -58px;

这是一个 link 的工作示例：EXAMPLE LINK

Answer 2

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

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

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

在两个按钮之间放置 div

Positioning a div between two buttons

html

css

position

button

ipad