0

私は現在、div別の中に2つのを持っていますdiv。1つは、その隣に配置tableされたを使用して更新されるアイテムのリストを備えたものです。右下隅に配置しようとしています。フローティング/配置を試しました。実際の効果はないようです。最初の画像は現在の状態で、2番目の画像は私がどのようになりたいかを示しています。 textboxtextbox現在位置：

望ましい効果

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;
}
4

4 に答える 4

3

さあ、このように使ってください

デモ

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>
于 2012-11-05T15:45:01.847 に答える
1

これを行う1つの方法は次のとおりです：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;
}
于 2012-11-05T15:44:15.843 に答える
0

デモ： 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;
}
于 2012-11-05T16:17:17.103 に答える
0

問題は、<table>要素のfloat：leftが「スタック」していることです。解決策は次のとおりです。

  1. <div style="clear:both;"></div>の直後に追加し<table>ます（空にすることもできます）。
  2. テーブルからフロートを取り外し、位置を調整します。

お役に立てば幸いです:-)

于 2012-11-05T16:33:06.727 に答える