Float:right 属性在 CSS3 中没有产生预期的结果

Question

我有一些 HTML5/CSS3 代码，我想在其中向右浮动 #rightodwnblock 图像。我已将 float: right 属性添加到代码中，但由于某种原因图像仍然漂浮在左侧。我在代码中看不到会导致这种情况发生的任何内容，所以我想知道问题是否出在服务器端？在这里进行测试：

http://www.orderofthemouse.co.uk/JavascriptTesting4Client/index.html

进行中的代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="/style.css" />
    <title>The End.</title>
    <style style="text/css">
      .marquee {
      height: 1024px;
      overflow: hidden;
      position: relative;
      }
      .marquee p {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      line-height: 50px;
      text-align: center;
      font:120pt Verdana,Arial;
      /* Starting position */
      -moz-transform:translateY(100%);
      -webkit-transform:translateY(100%);
      transform:translateY(100%);
      /* Apply animation to this element */
      -moz-animation: scroll-up 20s linear infinite;
      -webkit-animation: scroll-up 20s linear infinite;
      animation: scroll-up 20s linear infinite;
      }
      /* Move it (define the animation) */
      @-moz-keyframes scroll-up {
      0%   { -moz-transform: translateY(100%); }
      100% { -moz-transform: translateY(-100%); }
      }
      @-webkit-keyframes scroll-up {
      0%   { -webkit-transform: translateY(100%); }
      100% { -webkit-transform: translateY(-100%); }
      }
      @keyframes scroll-up {
      0%   {
      -moz-transform: translateY(100%); /* Browser bug fix */
      -webkit-transform: translateY(100%); /* Browser bug fix */
      transform: translateY(100%);
      }
      100% {
      -moz-transform: translateY(-100%); /* Browser bug fix */
      -webkit-transform: translateY(-100%); /* Browser bug fix */
      transform: translateY(-100%);
      }
      #rightodwnblock {
      top: 100px;
      float: right;
      }
    </style>
  </head>
  <body>
    <audio autoplay>

      <source src="<!--#exec cmd="/web/stuff/bin/randfile \*.mp3 music/mp3" -->" type="audio/mpeg" autoplay="autoplay" preload="auto" />
      <source src="<!--#exec cmd="/web/stuff/bin/randfile \*.ogg music/ogg" -->" type="audio/ogg" autoplay="autoplay" preload="auto" />
          <redacted>
    </audio>
    <div class="marquee">
      <p>Blackness.</p>
      </div>
   <img id=”rightodwnblock” height=”100px” width=”100px” src="littlelogo.png" title="Do Not Click Here" alt="Do Not Click Here"></div>
  </body>
</html>

更新：我在代码中添加了右浮动class，所以img标签属性如下：

<img class="float-right submit-button" id="rightodwnblock" height="100px"      width="100px" src="littlelogo.png" title="Do Not Click Here" alt="Do Not     Click Here"></div>

这也没有帮助。修改后的代码已经上传到服务器

更新 2：我已经按照下面的一个答案中的建议更改了引号标签，并更新了上面的代码以反映此更改。并没有解决原来的问题。

Answer 1

您使用的文本编辑器是什么？看起来您的代码在某些地方使用了 'smart quotes'，例如 img 标签上的 ID、高度和宽度属性。智能引号导致 ID 属性被声明为 id=""rightodwnblock"".

如果您使用 TextEdit 之类的工具来编辑代码，您需要确保将其设置为以纯文本而不是富文本编辑，因为富文本编辑器有时会将标准引号替换为智能引号。

Answer 2

您的问题似乎是您的文本编辑器没有以 Web 标准格式插入引号。所以不是这个：

<img id=”rightodwnblock” ...></div>

浏览器解释为：

<img id="”rightodwnblock”" ...></div>

什么时候应该使用它：

<img id="rightodwnblock" ...></div>

另一个问题是你没有"ended"你的css块；你错过了最后的 }：

@keyframes scroll-up {
  0%   {
    -moz-transform: translateY(100%); /* Browser bug fix */
    -webkit-transform: translateY(100%); /* Browser bug fix */
    transform: translateY(100%);
  }
  100% {
    -moz-transform: translateY(-100%); /* Browser bug fix */
    -webkit-transform: translateY(-100%); /* Browser bug fix */
    transform: translateY(-100%);
  }  
} /* <-- RIGHT HERE */

#rightodwnblock {
  top: 100px;
  float: right;
}

这导致 #rightodwnblock 样式被浏览器忽略。

Float:right 属性在 CSS3 中没有产生预期的结果

Float:right property not producing desired results in CSS3

html

css

double-quotes

Float:right 属性 在 CSS3 中没有产生预期的结果

Float:right property not producing desired results in CSS3

html

css

double-quotes

Float:right 属性在 CSS3 中没有产生预期的结果