段落内的浮动元素

Question

仍然是一个在基础知识上苦苦挣扎的新手。我有一个歌曲列表，我想在每个歌曲名称的右边放一个符号。我以为我可以使用花车来做到这一点。这是我想要的样子 (photoshop)

这是我得到的：

这是我的代码：

html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Albums</title
        <meta name="description" content="Albums">
        <link rel="stylesheet" type="text/css" href="Styles.css" />
    </head>
    <body>
        <article>
            <div id="container">

                <div id="album1" class="albums">
                    <img src="../Images_Albums/album1.jpg">
                </div>

                    <p>01 Song 1 <span>c</span></p>

                    <p>03 Song 2 <span>c</span></p>

                    <p>01 Song 3 <span>c</span></p>

                    <p>03 Song 4 <span>c</span></p>

            </div>
        </article>
    </body>
</html>

css:

@font-face {font-family: QuaestorSans;
          src:  url("../../fonts/QuaestorSans-Rg.otf") format("opentype"),
                url("../../fonts/QuaestorSans.ttf") format("opentype");
}
@font-face {font-family: Dingbats;
          src:  url("../../fonts/RiansDingbats-One.ttf") format("opentype");
}


html, body {
    height: 100%;
    margin:0;
    padding:0;
}

body {
    background: url(../Images_Albums/Background1.jpg) no-repeat;
    background-size: 100%;
}

article {
    position: absolute;
    width: 32%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    background: url(../Images_Albums/Background2.jpg) no-repeat;
    background-size: 100%;
}

#container {
    margin-top: 9%;
    position: relative;
    width: 43.5%;
    left: 50%;
    transform: translate(-50%, 0);

}

img {   
    max-width: 100%;
    display: block;
    margin-bottom: 4%;
}

p {
    color: white;
    font-family: QuaestorSans;
    float: left;
    margin-left: 2%;
    font-size: .8em;
    clear: left;
    line-height: 1;
}

span {
    color: #90eaf7;
    font-family: Dingbats;
    float: right;
    margin-right: 2%;
    line-height: 1;
}

我还不明白浮动是如何工作的吗？任何建议表示赞赏。谢谢

Answer 1

你很接近！右浮动元素需要高于非浮动内容才能出现在同一行上而不是在它们下方。所以改变：

01 Song 1 c

至：

c01 Song 1

Answer 2

如果您在跨度上设置宽度（在这种情况下只需使用 100%），它将按您的需要工作。

p {
  ...
  width: 100%; /* This is the change you need */
  ...
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: lightblue;
  background-size: 100%;
}
article {
  position: absolute;
  width: 32%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  background: url(../Images_Albums/Background2.jpg) no-repeat;
  background-size: 100%;
}

#container {
  margin-top: 9%;
  position: relative;
  width: 43.5%;
  left: 50%;
  transform: translate(-50%, 0);
}

p {
  color: black;
  font-family: QuaestorSans;
  float: left;
  margin-left: 2%;
  font-size: .8em;
  clear: left;
  line-height: 1;
  width: 100%; /* This is the change you need */
}
span {
  color: purple;
  font-family: Dingbats;
  float: right;
  margin-right: 2%;
  line-height: 1;
}

<article>
  <div id="container">
    <p>01 Song 1 <span>c</span></p>

    <p>03 Song 2 <span>c</span></p>

    <p>01 Song 3 <span>c</span></p>

    <p>03 Song 4 <span>c</span></p>

  </div>
</article>

段落内的浮动元素

floating elements inside a paragraph

html

css

css-float