Question

我在Susy找到了类似的东西：

<!DOCTYPE html>
<html>
  <head>
    <style>
    div {
      width: 20%;
      height: 40px;
      float: left;

      margin-right: -100%;
    }
    .a {
      background: red;
      margin-left: 0;
    }
    .b {
      background: yellow;
      margin-left: 20%;
    }
    .c {
      background: green;
      margin-left: 40%;
    }
    </style>
  </head>
  <body>
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
  </body>
</html>

我不明白为什么会这样。为什么浮动div一个接一个排队？

在我看来，它必须看起来像是，回到前面：

i.stack.imgur.com/AQqn6.png

和

i.stack.imgur.com/PUyBc.png

也许我忘记了漂浮的重要事情？谢谢。

Answer 1

由你images我觉得你需要这样的东西

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
    div {
      width: 20%;
      height: 40px;
      float: left;
      margin-left:20%;
    }
    .a {
      background: green;
      margin-left: 0;
    }
    .b {
      background: yellow;
    }
    .c {
      background: red;
    }
    </style>
  </head>
  <body>
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
  </body>
</html>

具有负右边距的浮动元素

1 个答案: