Question

我目前有两个div位于另一个div内，一个是table，其中包含使用定位的textbox更新的项目列表在它旁边，我试图将textbox放在右下角，我尝试过浮动/定位，它似乎没有任何实际效果，第一个图像是它现在的样子，第二张图片是我希望的样子。 Current position:

desired effect

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

在这里，你可以这样使用

Demo

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：“卡住了”解决方案是：

在<div style="clear:both;"></div>之后添加<table>（可以为空）。
从桌子上移走浮球并玩位置。

希望它有所帮助:-)

在另一个的右下角放置一个div

4 个答案: