html - CSS order 属性在我的项目中不起作用

我正在学习 ccs, js, html 并且我尝试制作一个有趣的小游戏,当您尝试使用“order:”属性单击时,一个按钮会从您身边消失,但由于某种原因它无法正常工作

我的html:

<!DOCTYPE html>
<html>
    <head>
        <title>Click me</title>
        <meta charset="UTF-8">
        <link rel = "stylesheet" href="../Annyoing click me app/index.css">
    </head>
    <body>
        <div>Don't click me</div>
        <div>Don't click me</div>
        <div id = "click-me">Click me</div>
        <div>Don't click me</div>
        <div>Don't click me</div>

        <script src = "../Annyoing click me app/index.js"></script>
    </body>
</html>

我的 CSS

html, body {height: 100%; overflow: hidden;}

body {
    background-color: black;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

div {
    width: 15%;
    height: 80px;
    margin: 20px;

    background-color: red;
    border: 6px solid darkred;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 40px;
}

#click-me {
    background-color: green;
    border: 6px solid darkgreen;
    order: 4;
}

由于某种原因,绿色按钮总是出现在行尾

回答1

默认情况下,所有 flex-children 都有 order: 0。如果你想让 #click-me 元素作为第一个元素,你可以使用 order: -1,这样它就永远是第一个元素。如果您希望它动态工作,您还必须在其他元素上指定 order

body {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

div {
  width: 15%;
  height: 80px;
  margin: 20px;
  background-color: red;
  border: 6px solid darkred;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

#click-me {
  background-color: green;
  border: 6px solid darkgreen;
  /* Always the first item */
  /*order: -1;*/
  order: 4;
}

div:first-of-type {
  order: 1;
}

div:nth-of-type(2) {
  order: 2;
}

div:nth-of-type(4) {
  order: 4;
}

div:nth-of-type(5) {
  order: 3;
}
<body>
  <div>Don't click me</div>
  <div>Don't click me</div>
  <div id="click-me">Click me</div>
  <div>Don't click me</div>
  <div>Don't click me</div>
</body>

相似文章

html - JQuery 展开和折叠行 div

我有一个基于div的table,它在行中动态加载数据。我正在尝试应用展开和折叠功能,以使视图更加用户友好且易于准备,这是必需的。但我有一些问题。单击包含新建、确认等的黑色行仅隐藏第一行但不隐藏。而我正...

jquery - 分页编号序列不起作用(jquery)

如果我单击任何数字,分页顺序将不起作用。如果我单击数字3,它会跳到数字4,每次我单击该数字时,它都会跳到另一个数字。但是,如果我单击下一个和上一个按钮,它就可以正常工作。它的发生是因为省略号li。任何...

最新文章