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>

background中包含circle，overlay和volume-controls类的div都是position: absolute;，volume-controls为position: relative; play-controls

在内联volume-controls，player和play-controls后，volume-controls与volume-controls内联，但{{1}}与玩家重叠。

如何在一行中设置所有内容，而不重叠？

编辑：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

一个具有绝对Div的内联相对Div

1 个答案: