如何使用CSS水平堆叠元素？

Question

我想创建一个自定义音频播放器，基本上是：

• 播放按钮
• 一个灵活的栏，即适应播放器宽度的
• 播放器右侧的一组按钮，即下载按钮等

对于前两个部分，我没有问题（请参阅小提琴），但对于第二个按钮组，我遇到了麻烦。

我尝试将该组设为float:right，但在这种情况下，它会从播放器中踢出。然后我尝试将flexible栏放置一个浮动属性，但在这种情况下，我必须指定它的宽度，它变得不再灵活。

以下是我想要实现的示例图像：

这是我到目前为止所做的：

HTML：

<div class="player" style="width:500px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="clear"></div>
</div>

CSS：

.player 
{
    height:24px;
    background-color: #222222;
}

.player .group 
{    
    float:left;
}

.player .group .button,
.player .group2 .button
{
    display: inline-block;
    width:24px;
    height:24px;
    background-color:#444444;
}

.player .group2 
{
    float:right;
}

.player .flexible
{
    box-sizing:border-box;
    overflow:hidden;
}

.player .flexible .bar 
{
    margin : 8px;
    height : 8px;
    background-color:#225599;     
}

的jsfiddle： https://jsfiddle.net/grh7sahq/3/

你有什么建议吗？

由于

Answer 1

我知道你希望中心部分具有灵活性。您可以使用display：flex。真正基本的CSS来展示它：

＆＃13;

＆＃13;

<div class="player" style="width:500px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="group2">
    <a class="button" href="#"></a>
  </div>
</div>
<br/>

<div class="player" style="width:150px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="group2">
    <a class="button" href="#"></a>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

将此css类更改为使用inline样式...

.player .group .button,
.player .group2 .button
{
    display: inline;
    width:24px;
    height:24px;
    background-color:#444444;
}

Answer 3

DEMO
使用弹性框

实际上非常简单

<div class="player">
  <div class="button"></div>
  <div class="seek">
    <div></div>
  </div>
  <div class="button"></div>
  <div class="button"></div>
</div>

CSS

.player{
  height: 35px;
  background-color: #555;
  display: flex;
}

.player>.button{
   width: 35px;
}

.player>.seek{
   padding: 10px;
   flex-grow: 1;
}

.player>.seek>div{
  background-color: #0af;
  height: 100%;
}