定位 HTML/CSS 个元素时出现问题

Question

我需要你们的帮助，

我试过float我试过display:inline-block但没有用。
如果你明白我的意思，他们会按照他们想要的方式继续移动，而不是按照我想要的方式移动。

那么我该如何解决这个问题呢？

Answer 1

.block {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.block2{
  position: absolute;
  right: 0;
  top:0;
}
.block3 {
  height: 400px;
  float:right;
}

    <div class="block1 block"></div>
    <div class="block2 block"></div>
    <div class="block3 block"></div>

Answer 2

可以使用display: flex;属性。这可以给你预期的结果。首先用一个 div 包裹所有 div 元素。然后将父 div 的显示设置为 flex。无需使用 absolute 位置。

<div class="block">
    <div class="child-left">Left side contents</div>
    <div class="child-right">Right side contents</div>
</div>

.block {
     display: flex;
     justify-content: space-between;
}

要了解有关 flex 的更多信息，请查看 this link

定位 HTML/CSS 个元素时出现问题

Issue while positioning HTML/CSS elements

html

css

move

alignment

web-frontend