HTML div位置

Question

我现在正在学习HTML，并且在我的代码中放了一个亲戚div。

在那之前还有2个div，但它们没有碰撞，遗憾的是前两个仍然占据了相对的空间之上，我希望它位于页面顶部。

我的代码：

.foo {
    font-family: 'Tahoma';
    font-size: 30px;
    color: #fff;
    background-color: black;
    height: 180px;
    width: 280px;
    text-align: center;
    position:relative;
    left:540px;
    border:5px solid #fff;
    top:-50px;
}

.lastpage {
    position:relative;
    text-align:left;
    width:20%;   
}

.index {
    position:relative;
    text-align:left;
    width:20%;
}

body {
    background-color:lightgray;
    text-align:center;
    align-content:center;
    color: #990099;
    font-family: 'Tahoma';
    font-size: 15px;
}

<div class="foo">
    <br><br>F O O - B A R
</div>
<div class="lastpage">
    <form method=get action="http://www.boomy.web44.net/CURRY.html/">
        <button type="submit">Last Page</button>(2/2)
    </form>
</div>
<div class="index">
    <form method=get action="http://www.boomy.web44.net//">
        <button type="submit">Index</button>
    </form>
</div>

我希望“Foo bar”div上升并与两个按钮处于同一水平

Answer 1

我更改了您的CSS代码：

.foo
{
float:right;
margin-right: 540px;


font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
border:5px solid #fff;
top:-50px;
}

.lastpage
{
position:relative;
text-align:left;
width:20%;   
float:left;
}

.index
{
float:left;
position:relative;
text-align:left;
width:20%;
}

我在您的 foo 课程中添加了float:right和margin-right，并在您的最后一页和索引中添加了float:left 上课。

我认为它应该适合你！

Answer 2

尝试添加display: inline-block规则以使div显示在同一行或浮动。默认情况下，div是块显示，两个div不会出现在同一行。

另一种方法是使用float: left div上的lastpage属性使其保持在左侧并将其与另一个div对齐。

这会解决您的问题吗？