定位兩個按鈕之間的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

使用一個簡單的4×2網格系統：

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