Позиционирование 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>