CSS的position：表和DIV中DIV

Question

我卡在這裏有一個簡單的CSS問題：

的問題是在底部右對齊的div元素裏面的「世界」的文字。

這裏是一個小提琴： http://fiddle.jshell.net/0p6w3x14/2/

<div id="container"> 
<div id="tableElement"> 
    <table> <!-- this table needs to be here, it's containing more info --> 
     <tr> 
      <td> 
       Hello 
      </td> 
     </tr> 
    </table> 
</div> 
    <div id="element"> 
     World 
    </div> 

</div> 

#container 
{ 
width: 200px; 
border: 1px solid black; 
} 

#tableElement 
{ 
border: 1px solid black; 
display: inline-block; 
} 

table 
{ 
    border: 1px solid red; 
    height: 100px; 
} 

#element 
{ 
    display: inline-block; 
    float: right; 
border: 1px solid green; 
} 

Answer 1

更新你的CSS是這樣的：

#container 
{ 
width: 200px; 
border: 1px solid black; 
    position:relative; // add this line 
} 

#element 
{ 
    display: inline-block; 
    position:absolute; //add this line 
    bottom:0; //add this line 
    right:0; //add this line 
    border: 1px solid green; 
} 

，並刪除float:right

Working fiddle here

Answer 2

檢查這個Fiddle。

我沒有使用

float: right 

和

display: inline-block 

而是我設置一個定義的寬度，它的左屬性設置爲100％，然後用保證金，以使其適應容器

#element{ 
    width: 45px; 
    top:100%; 
    left: 100%; 
    margin-left: -45px; 
} 

Answer 3

這可以簡單地通過給#element款式position:absolute;,bottom:0;和right:0。然後給#container風格position:relative;這樣的：

#container 
{ 
width: 200px; 
border: 1px solid black; 
position:relative; // Parent needs relative positioning if child will have absolute positioning 
} 


#element 
{ 
border: 1px solid green; 
position:absolute; 
bottom:0; 
right:0; 
} 

JSFiddle Demo