如何移动这个div块？

Question

我似乎无法找到有关如何将.six移动到左上角的任何信息。我试过在谷歌，YouTube等上搜索

这是我的代码：

＆＃13;

＆＃13;

.plat {
  background-color: grey;
  width: 20%;
  border: 3px solid red;
  margin-left: -0.5%;
}

.duck {
  background-color: blue;
  color: yellow;
  border: solid 3px red;
  margin-left: 20%;
  width: 20%;
}

.bill {
  background-color: green;
  width: 20%;
  margin-left: 40%;
  border: solid 3px red;
}

.dan {
  background-color: yellow;
  border: 3px solid red;
  width: 20%;
  margin-left: 60%;
  text-align: center;
}

p {
  line-height: 3px;
}

.five {
  background-color: purple;
  width: 20%;
  border: red solid 3px;
  margin-left: 80%;
}

.six {
  background-color: black;
  color: white;
  border: 3px solid red;
  width: 20%;
  margin-left: 80%;
  margin-bottom: 500px;
}

.seven {
  background-color: blue;
  border: 3px solid red;
}

＆＃13;

<div class="plat">

  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>
</div>

<div class="duck">
  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>

</div>

<div class="bill">
  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>
</div>

<div class="dan">
  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>
</div>

<div class="five">
  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>
</div>

<div class="six">

  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>

</div>

<div class="seven">
  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>
</div>

<div class="eight">
  <p>apple</p>
  <p>pie</p>
  <p>cheese</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我尝试做的是将.six div移到右上角，但我无法让它工作。

Answer 1

此处，右上角是黑色new。

＆＃13;

＆＃13;

std::smart_pointer

＆＃13;

.six

＆＃13;

＆＃13;

＆＃13;

Answer 2

这很简单 更改.six类

.six {background-color:black;
                color:white;
                border: 3px solid red;
                position: absolute;
                top: 0%;
                right: 0%;
                width:20%;
                margin-left:80%;
                margin-bottom:500px;
                }

我希望这对你有所帮助。

Answer 3

灵活解决方案如何在不需要位置的情况下轻松调整对齐：绝对：

.container {
  display:flex;
  height:500px;
  align-items:flex-start;
}
.container > div {
  width:20%;
  border:2px solid green;
  box-sizing:border-box;
}

.container > div:nth-child(odd) {
  align-self:center;
  border-color:red;
}

.container > div:nth-child(3n) {
  align-self:flex-end;
  border-color:blue;
}

<div class="container">
  <div class="plat">

    <p>apple</p>
    <p>pie</p>
    <p>cheese</p>
  </div>

  <div class="duck">
    <p>apple</p>
    <p>pie</p>
    <p>cheese</p>

  </div>

  <div class="bill">
    <p>apple</p>
    <p>pie</p>
    <p>cheese</p>
  </div>

  <div class="dan">
    <p>apple</p>
    <p>pie</p>
    <p>cheese</p>
  </div>

  <div class="five">
    <p>apple</p>
    <p>pie</p>
    <p>cheese</p>
  </div>

  <div class="six">

    <p>apple</p>
    <p>pie</p>
    <p>cheese</p>

  </div>

  <div class="seven">
    <p>apple</p>
    <p>pie</p>
    <p>cheese</p>
  </div>

</div>