如何使音频在CSS中正确浮动

Question

我正在尝试使所有三个音频都通过CSS浮动。不知道我在想什么或弄乱了什么。

在css中，我尝试将'audio'更改为.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>