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%;
}

我将 float:right 和 margin-right 添加到您的 foo 类，并将 float:left 添加到您的lastpage 和 index 类。

我认为它应该适合你!