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 */
  ...
}

＆＃13;

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

＆＃13;

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

＆＃13;

段落中的浮动元素

2 个答案: