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>

更新：我在代码中添加了一个浮动右类，因此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

您的问题似乎是您的文本编辑器未插入网络标准格式的引号。所以不要这样：

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

浏览器解释为：

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

当你应该使用它时：

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

另一个问题是你没有“结束”你的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样式。

Answer 2

你在为文本编辑器使用什么？看起来您的代码在某些地方使用“智能引号”，例如img标记上的ID，高度和宽度属性。智能引号导致ID属性被声明为id =“”rightodwnblock“”。

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

Float：在CSS3中没有产生预期结果的正确属性

2 个答案: