Question

我遇到了一个简单的css问题：

问题在于调整世界＆＃34;右下方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

但是我设置了一个定义的宽度，将其Left属性设置为100％，然后使用margin将其调整为容器

#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

Css位置：表格和div里面的div

3 个答案: