html - CSS 位置 : table and div inside div

Question

我被一个简单的 css 问题困在这里:

问题是在右下角的 div 元素内对齐“World”文本。

这是一个 fiddle : 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