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

我想创建一个自定义的音频播放器，带基本上是：如何使用CSS水平堆叠元素？

一个按钮，用于播放
一个灵活条，即自身适应玩家宽度
在一组按钮玩家的权利，即下载按钮等

对于两个第一部分我没有问题（见小提琴），但它是第二个按钮组我有麻烦。

我试着把这个组合放在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/

您有什么建议吗？

感谢

来源

2016-07-27 dooxe

如果你有一个图像显示你想要达到的效果会很好 –

我明白你想要的中心部分是灵活的。您可以使用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>

来源

2016-07-27 08:13:47

Aaaaw是啊，非常感谢！这真的让生活更轻松：https：//jsfiddle.net/grh7sahq/4/ – dooxe

改变这个CSS类使用inline风格。

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

来源

2016-07-27 08:11:18

实际上，当这样做时，'width'和'height'属性没有效果，按钮消失：https：//jsfiddle.net/v6d918aL/ – dooxe

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%; 
}

来源

2016-07-27 08:21:06

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

回答

相关问题