浮動元素到字段集的右上角

Question

有沒有辦法讓我有浮動在div的右側，並使其與右上角齊平的這個框？我曾試圖使它position:relative和top:0px，但它固執地仍然彌補了傳說的填補。

http://jsfiddle.net/loren_hibbard/dpUM2/

Answer 1

你要麼需要將位置設置爲absolute，或#title元素設置爲float:left。

例與position:absolute上#top返回和position:relative上#out：

http://jsfiddle.net/bozdoz/dpUM2/9/

例與#title設置爲float:left：

http://jsfiddle.net/bozdoz/dpUM2/13/

Answer 2

改變你的CSS是如下：

#out{ 
     width:300px; 
    height:400px; 
    background:#efefef; 
     border:1px solid gray; 
    padding:0px;  
    } 
    #top{ 
    float:right; 
     background-color:#fff; 
     width:150px; 
     height:25px; 
     border:1px solid black; 
     margin:0px; 
    } 
    #title{ 
    padding:0px; 
     margin:0px; 
     float:left; 

    }​ 

Answer 3

嘗試在#top添加此：

position: relative; 
top: -24px; 

演示：http://jsfiddle.net/dpUM2/10/

Answer 4

位置：相對父，位置：絕對的孩子，注意-1px使其重疊父的邊界。

#out{ 
width:300px; 
height:400px; 
background:#efefef; 
border:1px solid gray; 
position:relative; 
} 
#top{ 
top:0; 
right:-1px; 
background-color:#fff; 
width:150px; 
height:25px; 
border:1px solid black; 
position:absolute; 
} 

http://jsfiddle.net/calder12/dpUM2/14/