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>

我希望「富巴」分區上去，並在同一水平上的兩個按鈕

Answer 1

嘗試添加display: inline-block規則使div出現在同一行或浮動。默認情況下，div是塊顯示，兩個div不會出現在同一行上。

這樣做的另一種方法是使用lastpage div上的float: left屬性使其保持在左側並將其與另一個div對齊在同一行上。

這是否解決您的問題？

Answer 2

我改變你的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您富類和float:left您尾和指數類。

我認爲它應該適合你！