使用CSS的HTML定位

我在HTML定位方面遇到了问题。我胡闹了一会儿，这是我得到的最远的结果。下面是HTML和CSS

.group:之后{
内容：“；
显示：块；
明确：两者皆有；
}
文章{
宽度：400px；
边框：1px纯黑；
}
#提示，
#头衔{
填充：0；
保证金：0；
}
#小费{
背景：黄色；
}
#头衔{
背景：橙色；
}
#方框1{
浮动：左；
宽度：60px；
高度：60px；
背景：粉红色；
}
#方框2{
浮动：对；
宽度：60px；
高度：120px；
背景：蓝色；
}
#方框3{
浮动：左；
清除：左；
宽度：60px；
高度：60px；
背景：绿色；
}

提示
标题

假设长方体的高度是固定的且不会增长，您可以简单地给#长方体_2一个等于长方体_1高度的负边距：

#box_2 { 
    float: right;
    width: 60px;
    height: 120px;
    background: blue;
    margin-top:-60px;
}

---

如果你对你的html代码有点过多的理解，那就没问题了。您应该先放置

#box1

，然后放置

#box2

，然后放置

#box3

这是一个例子

.group:之后{
内容：“；
显示：块；
明确：两者皆有；
}
文章{
宽度：400px；
边框：1px纯黑；
}
#提示，#标题{
填充：0；
保证金：0；
}
#小费{
背景：黄色；
}
#头衔{
背景：橙色；
}
#方框1{
浮动：左；
宽度：60px；
高度：60px；
背景：粉红色；
}
#框2{
浮动：对；
宽度：60px；
高度：120px；
背景：蓝色；
}
#方框3{
浮动：左；
清除：左；
宽度：60px；
高度：60px；
背景：绿色；
}

提示
标题
你的意思是这样，对吗？只需更改HTML中的顺序，如下所示

    <div id="box_1"></div>
    <div id="box_2"></div>
    <div id="box_3"></div>


    #box_1 {
    float: left;
    width: 60px;
    height: 60px;
    background: pink;
}

    #box_2 {
        float: right;
        width: 60px;
        height: 120px;
        background: blue;
    }

    #box_3 {
        clear: left;
        width: 60px;
        height: 60px;
        background: green;
    }


#方框1{
浮动：左；
宽度：60px；
高度：60px；
背景：粉红色；
}
#方框2{
浮动：对；
宽度：60px；
高度：120px；
背景：蓝色；
}
#方框3{
清除：左；
宽度：60px；
高度：60px；
背景：绿色；
}

您可以在框2中添加“位置：绝对”和“右：0”，然后在文章中添加“位置：相对”

#box_2 {
    position:absolute;
    right: 0;
}
article {
        position: relative;
}

是否有必要只使用浮点数？没有。我使用浮点数是因为我在这个例子中遇到的实际问题是，
\box\u 1
可以有不同的高度。
边距顶部：-60px
如果元素的高度发生变化，它将是不利的。是的，这正是我说的原因“假设箱子的高度是固定的，并且不会增加“：-）如果是这样的话，那就是固溶体。如果没有，他将不得不用其他方法来解决这个问题。我遇到的问题是，
#box_1
的高度不是固定的。对不起，我不清楚。另外，
#box_3
始终位于
#box_2
之前。更改HTML代码的顺序不是一个选项。好的，但是源代码的顺序呢？HTML必须与现在完全一样吗？是的，
#box_3
将始终位于
#box_2
之前。我的网站实际上先呈现了
#box_1
，然后呈现了
#box_3
。在一定条件下，它只会呈现
#box_2
。按照先前发布的方式再次发布答案是一件好事，可能会获得一些东西，但在道德上并不好。哦，对不起，伙计，我在胡闹，没有看到其他人已经发布了一些东西。我的坏。我的网站实际上先呈现
#box_1
，然后呈现
#box_3
。它只会在特定条件下渲染后的
#box_2
。因此，订单无法更改。另外，
#box1
的高度没有固定为60px。因此，如果您的站点呈现
#box1
，那么
#box3
可以将这两个框添加到父div中，
#box2
将像这样省略