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