如何让音频在 CSS 中浮动

Question

我试图让我的所有三个音频都通过 css 浮动。不知道我错过了什么或搞砸了什么。

在 css 中，我尝试将"音频"更改为 .audio 和 #audio ，也尝试将其更改为音乐，因为这就是我的div 的名称。这些都不起作用。

audio
{
align:right;
}

<div id="Music" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;" > 
<h1>My Favorite Music</h1>
<p>Jrad</p>
<audio controls style= "display:block">
<source type="audio/ogg"
src="media/jrad2019-07-13.cmc621.cmc64.sbd.matrix-t03.ogg">
</audio>
<p>Swagger by Joe Russo's Almost Dead</p>
<audio controls style= "display:block">
<source type="audio/mp3"
src="media/jrad2019-01-19.cmc621.cmc65xt.sbd.matrix-s1t01.mp3">
</audio>
<p>Marco Solo by Joe Russo's Almsot Dead</p>   
<audio controls style= "display:block">
<source type="audio/mp3"
src="media/jrad2019-03-16.cmc621.cmc64.sbd.matrix-s1t04.mp3">
</audio>
<p>Jam by Joe Russo's Almost Dead</p> 
<audio controls style= "display:block">
<source type="audio/mp3"
src="media/jrad2019-04-27.cmc621.cmc64.sbd.matrix-s1t01.mp3">
</audio>
</div>

Answer 1

您可以使用display: flex;获取 1x1 布局，然后将flex-grow: 1;应用于p以将元素设置为最大可用宽度。

#Music {
background-color: #dcdcdc;
border: #00008b 2px dashed;
}
.wrapper {
display: flex;
}
.wrapper p {
flex-grow: 1;
}

<div id="Music">
<h1>My Favorite Music</h1>
<div class="wrapper">
<p>Jrad</p>
<audio controls style="display:block">
<source type="audio/ogg"
src="media/jrad2019-07-13.cmc621.cmc64.sbd.matrix-t03.ogg">
</audio>
</div>
</div>

Answer 2

始终使用包装器，以便您可以控制它并使用显示弹性来对齐

.wrap{display:flex;
justify-content:space-between;}

<div id="Music" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;" > 
<h1>My Favorite Music</h1>
<div class=wrap> <p>Jrad</p>
<audio controls style= "display:block">
<source type="audio/ogg"
src="media/jrad2019-07-13.cmc621.cmc64.sbd.matrix-t03.ogg">
</audio></div>
<div class=wrap>  <p>Swagger by Joe Russo's Almost Dead</p>
<audio controls style= "display:block">
<source type="audio/mp3"
src="media/jrad2019-01-19.cmc621.cmc65xt.sbd.matrix-s1t01.mp3">
</audio></div>
<div class=wrap>
<p>Marco Solo by Joe Russo's Almsot Dead</p>   
<audio controls style= "display:block">
<source type="audio/mp3"
src="media/jrad2019-03-16.cmc621.cmc64.sbd.matrix-s1t04.mp3">
</audio></div>
<div class=wrap>
<p>Jam by Joe Russo's Almost Dead</p> 
<audio controls style= "display:block">
<source type="audio/mp3"
src="media/jrad2019-04-27.cmc621.cmc64.sbd.matrix-s1t01.mp3">
</audio></div></div>