0

私はウィジェットコントロールに取り組んでいます。ウィジェットはウィジェットコンテナに動的にロードされます。ウィジェットコンテナには、ウィジェットを保持するdivが含まれています。これはウィジェット領域と呼ばれます。ウィジェットコンテナは、JQueryUIを使用してドラッグおよびサイズ変更できるように作成されています。

私が抱えている問題は、ウィジェット領域の下部マージンが機能していないように見えるか、マージンがどのように機能するかを誤解している可能性があることです。左上と右上の余白は正常に機能します。20pxに設定しているので、ウィジェット領域はウィジェットコンテナの左上と右から20pxです。下マージンも20pxですが、ウィジェット領域の下部間の距離は、ウィジェットコンテナの下部から20pxをはるかに超えています。Firefoxで試しましたが、同じ問題が発生します。

ウィジェットコンテナのサイズを変更すると、マージンのためにウィジェット領域の左側もサイズ変更されますが、下部マージンが機能していないように見えるため、ウィジェットの下部はまったくサイズ変更されません。

これが私のウィジェットコンテナとcssです。

<asp:Panel ID="Panel1" CssClass="widgetcontainer" runat="server" Height="500px" BorderStyle="Solid" BorderWidth="1px" Width="485px" BackColor="White">
    <asp:Panel ID="Panel2" CssClass="widgetcontainerheader" runat="server">
        <asp:Label ID="Label2" runat="server" Text="Gadget header"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="WidgetBodyPanel" CssClass="widgetarea" runat="Server"    BorderStyle="Solid">
        <p>
            some text
        </p>
    </asp:Panel>

</asp:Panel>

div.widgetcontainerheader
{
    background-color:#CCFF99;

    border-bottom-style:solid;
    border-bottom-width:thin;
    border-bottom-color:#D2D2D2;

    position: relative;
    width:100%;
    height:20px;
}

.widgetarea
{
    position:relative;

    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    margin-bottom:20px;

}

誰かがボトムマージンが機能しない理由を教えてもらえますか？

ありがとうございました

4

1 に答える 1

1

ウィジェットコンテナの高さを 500px に設定しています。

widgetarea には 20px の margin-bottom がありますが、widgetarea には高さがないため、それよりも大きく表示されます。おそらく設定高さ: 100%。

.widgetarea
{
  margin: 20px;
  height: 100%;
}

ところで、これらの迷惑な UI の問題をデバッグするには、http: //getfirebug.com/をインストールする価値があります。

于 2011-10-01T00:24:10.910 に答える