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

Question

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

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

对于前两个部分我没有问题(参见 fiddle )，但是对于第二个按钮组我有问题。

我尝试用float:right 放置组，但在这种情况下它被踢出了播放器。然后我尝试为 flexible 栏添加一个 float 属性，但在这种情况下我必须指定它的宽度并且它变得不再灵活。

这是我想要实现的示例图像:

这是我目前所拥有的:

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

我了解到您希望中心部分具有灵 active 。你可以使用 display: flex。显示它的非常基本的 CSS:

.player{
  background: black;
  height: 100px;
  display: flex;
}

.button{
  background: blue;
  height: 100px;
  width: 24px;
  display: block;
}

.flexible{
  flex: 1;
}

<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>