Липкая позиция Div с использованием CSS

Я пытаюсь создать цифровой барабан. У меня есть изображение барабанного набора, и я хочу разместить на каждом барабане круглые колодки. У меня возникают проблемы с удалением колодок, когда я изменяю размер представления. Я попытался использовать бутстрап, чтобы держать divs на месте, но я обнаружил, что это не сработает, потому что изменение размера просто накладывает удары по левому краю. Есть ли способ удерживать хитпады на месте с помощью CSS поверх фонового изображения барабанного набора при изменении размера представления? Ниже мой текущий HTML и изображение барабанной установки, на которой я пытаюсь поместить хитпады. Спасибо заранее за любую помощь!Липкая позиция Div с использованием CSS

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 col-sm-12"> 
      <img id="playboard" src="drums.png" alt=""> 
       <div class="row" style="height: 100px"> 
       </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit hihathit animated pulse infinite" ng-audio="hihat.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit crashhit animated pulse infinite" ng-audio="crash.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit ridehit animated pulse infinite" ng-audio="ride.mp3" start="0.1"></button> 
       </div> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-6 col-sm-6"> 
        <button class="hit tomonehit animated pulse infinite" ng-audio="tomone.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-6 col-sm-6"> 
        <button class="hit tomtwohit animated pulse infinite" ng-audio="tomtwo.mp3" start="0.1"></button> 
       </div> 
      </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit snarehit animated pulse infinite" ng-audio="snare.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit kickhit animated pulse infinite" ng-audio="kickdrum.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit floortomhit animated pulse infinite" ng-audio="floortom.mp3" start="0.1"></button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

источник

2016-08-13 Lindy Leigh

Привет, вы пробовали играть с элементом холста html5 - возможно, лучше, чем использовать divs - очень классный проект, кстати, –

У меня нет! Я буду смотреть в него. Спасибо :) –

Я посмотрел холст, и похоже, что я столкнусь с той же проблемой. Я могу нарисовать их с помощью Javascript, но мне придется их расположить с помощью css. Спасибо за предложение. –

Вы можете попробовать использовать HTML-таблицу или Flex-поле, чтобы содержать "хит колодки". Если вы используете проценты для значений размера, я думаю, что вы можете сделать масштаб ваших колодок, совместимых с фоновым изображением.

источник

2016-08-13 00:19:34

Будет ли flexbox вести себя так же, как бутстрап, путем укладки ящиков при изменении размера представления? Я использую проценты внутри контейнера, и я могу получить удаленные панели для перемещения влево и вправо, но не вверх и вниз. Я до сих пор довольно новичок в этом, поэтому я все еще выясняю, как позиционировать вещи. –

Я понял. Установите контейнер в относительный. Вставьте изображение внутри с шириной 100% и высотой авто. Затем установите абсолютные кнопки и используйте верхнюю, правую, левую и нижнюю позиции.

источник

2016-08-13 01:47:01

Липкая позиция Div с использованием CSS

ответ

Смежные вопросы