asp.net - 将一个 div 放在另一个的右下角

Question

我目前有两个divs 在另一个 s 中div，一个是 a ，其中table包含一个通过使用位于它旁边的 a 更新的项目列表textbox，我试图将其定位textbox在右下角，我尝试过浮动/定位和它似乎对它没有任何实际影响，第一张图片是它现在的样子，第二张图片是我想要的样子。

ASP.NET 代码：

<asp:Content ID="Content1" ContentPlaceHolderID="PrimaryContentPlaceHolder" runat="Server">
<%--<div style="margin-bottom: 20px; width: 300px;">--%>
    <table class="Grid" style="width:300px;float:left; margin-right:10px;" >
        <tr>
            <th>
                Banned Domains
            </th>
            <td runat="server" id="bannedDomains">
            </td>
        </tr>
    </table>
   <%-- </div>--%>
<div style="position:relative; bottom:0px;">
    <asp:TextBox ID="bannedDomainText" runat="server" Rows="5" TextMode="SingleLine"
        Width="150px" Height="19px" />
    <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" style="padding: 2px 5px 2px 5px;" PostBackUrl="~/admin/bespoke/Green-FreeShipping.aspx"
        Text="Add to List" />
</div>
</asp:Content>

CSS：

    #Content table
{
border-collapse: collapse;
}

#Content table.Grid 
{
width: 100%;
clear: both;
margin: 12px 0 12px 0;
}

#Content table.Grid th, #Content table.Grid td
{
background-color: White;
border-top: 1px solid #cccccc;
padding: 2px 6px 2px 6px;
}

#Content table.Grid th
{
background-color: #f5f5f5;
}

#Content table tr:hover td
{
background: #f9f9f9;
}

Answer 1

给你，像这样使用它

演示

CSS

.Grid {
    border: 1px solid #ff0000;
    height: 400px;
    width:300px;
    position: relative;
}

div.wrapper {
    position: relative;
    display: inline-block;
}

textarea {
    position: absolute;
    bottom: 0;
    right: -200px;
}

HTML

<div class="wrapper">
<table class="Grid">
    <tr>
        <th>
            Banned Domains
        </th>
       <td runat="server" id="bannedDomains"></td>
    </tr>
</table>
<textarea></textarea>
</div>

Answer 2

这是一种方法：http: //jsfiddle.net/5DjM9/

<div class="div1">LEFT</div>
<div class="div2"><div>RIGHT</div></div>


.div1 {
width:200px;
height:200px;
background:#ccc;
float:left;
margin-right:10px;
}

.div2 {
width:200px;
height:200px;
background:#ccc;
float:left;
position:relative;
}
.div2 div {
width:200px;
position:absolute;
bottom:0;
background:red;
}

Answer 3

演示：http: //jsfiddle.net/nobuts/WzUjr/

<div class="big_box">
    <div class="cols"><div id="table">div/table</div></div>
        <div class="cols"><div id="textbox">div/textbox</div></div>
    <br style="clear:both">
</div>

.big_box{
    background:red;
    color:#000;
    height:250px;
    padding:5px;
}

.cols{
    height:240px;
    float:left;
    margin:5px;
    position:relative;
}
#table{
    background:#ff9900;
    height:100%;
    width:250px;
}
#textbox{
    background:#ff9900;
    bottom:0px;
    height:30px;
    top:auto;
    position:absolute;
    width:100px;
}

Answer 4

问题是<table>元素上的 float:left 被“卡住”了，解决方案是：

1. 在( 它可以是空的 )之后添加一个<div style="clear:both;"></div>权利。<table>
2. 从桌子上取下浮动并玩位置。

希望它有所帮助:-)