0

我正在开发一个小部件控件。小部件被动态加载到小部件容器中。小部件容器包含一个包含小部件的 div，这称为小部件区域。使用 JQuery UI 使小部件容器可拖动和调整大小。

我遇到的问题是小部件区域的下边距似乎不起作用，或者我可能误解了边距的工作方式。左右边距工作正常，我将它们设置为 20 像素，因此小部件区域距离小部件容器的左上角和右侧 20 像素。下边距也是 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

您将小部件容器的高度设置为 500 像素。

我会说小部件区域的边距底部确实为 20px，但它看起来比这更大，因为小部件区域没有高度。也许设定高度：100%。

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

顺便说一句，非常值得安装http://getfirebug.com/来调试这些烦人的 ui 问题。

于 2011-10-01T00:24:10.910 回答