html - 一个包含绝对 div 的内联相对 div

Question

以下是我的标记:

.play-controls {
        .fa-play, .fa-pause {
            font-size: 25px;
        }
    }

.volume-controls {
    display: inline-block;
    position: relative;

    .overlay {
        background-color: $highlight;
        height: 10px;
        border-radius: 5px;
        width: 0px;
        position: absolute;
        z-index: 15;
    }

    .background {
        background-color: $text-color;
        width: 100px;
        height: 10px;
        border-radius: 5px;
        position: absolute;
        z-index: 10;
    }

    .circle {
        border-radius: 100%;
        position:absolute;
        background-color: #fff;
        border: 1px solid;
        height: 15px;
        width: 15px;
        z-index: 20;
        top: -3px;
    }
}

.player {

    #album-artwork {
        width: 80px;
        height: 80px;
        vertical-align: middle;
        display:inline-block;
        margin-right: 10px;
    }
    .wrapper {
        display:inline-block;
        .information {
            margin-bottom: 5px;

            #song-title {
                font-size: 22px;
                font-weight:bold;
                margin-right: 5px;
            }

            #artist-album {
                font-size: 18px;
            }
        }

        .progress-bar {
            position: relative;

            .overlay {
                background-color: $highlight;
                height: 10px;
                border-radius: 5px;
                width: 0px;
                position: absolute;
                z-index: 15;
            }

            .background {
                background-color: $text-color;
                width: 600px;
                height: 10px;
                border-radius: 5px;
                position: absolute;
                z-index: 10;
            }

            .circle {
                border-radius: 100%;
                position:absolute;
                background-color: #fff;
                border: 1px solid;
                height: 15px;
                width: 15px;
                z-index: 20;
                top: -3px;
            }
        }
    }
}

<div class="play-controls">
  <i class="fa fa-play" id="playpause"></i>
</div>

<div class="volume-controls">
  <div class="background"></div>
  <div class="circle"></div>
  <div class="overlay"></div>
</div>

<div class="player">
  <img id="album-artwork" src="build/images/guero.jpg">
  <div class="wrapper">
    <div class="information">
      <span id="song-title">Go It Alone</span>
      <span id="artist-album">Beck - Guero</span>
    </div>
    <div class="progress-bar">
      <div class="background"></div>
      <div class="circle"></div>
      <div class="overlay"></div>
    </div>
  </div>
</div>

在volume-controls中类background、circle、overlay的div都是 position: absolute; with volume-controls as position: relative;.

在制作play-controls、volume-controls 和player 内联时，play-controls 是内联的使用 volume-controls，但 volume-controls 与播放器重叠。

我怎样才能在一行中设置所有内容而不重叠？

编辑:JSFiddle

Answer 1

你可以 float:left; 3 个主要部分或 display:inline-block; 它们 player 的问题在 volume-controls 是因为 volume-controls 中的绝对定位元素。您可以将 宽度 添加到 volume-controls。

.volume-controls {
    display: inline-block;
    position: relative;
    width:150px;
}

这是 fiddle