爲什麼浮動我的例子不工作

Question

我有一個簡單的問題，我不明白爲什麼這不工作：

HTML部分：

<div class="main"> 
<p> 
    KSDfao oasdkfo posfk ojsf a osjdf klksj f lkjsdf lkjas j lsajf lkjf jasfd 
    lksf dfj ksfpwo ksdas dflkj jf kasjf ajsfl kasjdfkjasf 9j4k lsidjf ijsf 
    öskjdf jsd falksdjf öaslkjfinkasdn ig sadf sadf sadf sadf asd fas dfsd as 
    fasd fasd fasd fasd fasd fs fsdf asdfsadf sd fsad fsad fasd fasd fasd fasdf 
    sdf as f 
</p> 
<div class="right">Right</div> 
</div> 

CSS PART

.main{ 
    position:relative; 
    width: 300px; 
} 

.right{ 
    poition: absolute; 
    top: 0px; 
    float: right; 
    border: 1px solid #00f; 
    padding: 20px; 
    width: 50px; 
} 

文本應該圍繞div浮動。這裏有什麼問題？

Answer 1

這是你要做的佈局嗎？如果是這樣，請刪除position: absolute，並在您的標記之前將您的right div放在文本之前。

.main { 
 
    width: 300px; 
 
} 
 
.right { 
 
    float: right; 
 
    border: 1px solid #00f; 
 
    padding: 20px; 
 
    width: 50px; 
 
}

<div class="main"> 
 
    <div class="right">Right</div> 
 
    <p> 
 
    KSDfao oasdkfo posfk ojsf a osjdf klksj f lkjsdf lkjas j lsajf lkjf jasfd lksf dfj ksfpwo ksdas dflkj jf kasjf ajsfl kasjdfkjasf 9j4k lsidjf ijsf öskjdf jsd falksdjf öaslkjfinkasdn ig sadf sadf sadf sadf asd fas dfsd as fasd fasd fasd fasd fasd fs fsdf 
 
    asdfsadf sd fsad fsad fasd fasd fasd fasdf sdf as f 
 
    </p> 
 
</div>