PHP Jquery Resize 块隐藏 DIV 信息

Question

下面链接中的代码允许您拖动小框并调整其大小。框中有文本，但文本没有显示，因为它被某些东西掩盖了，我相信这是调整大小的框。我尝试更改一些设置并对其进行修补，但没有找到任何人可以解决它。

为什么要掩盖信息？

代码：http://plnkr.co/edit/PSdrU38Mi8Z186m8ynMN

Answer 1

它们被 JQuery UI resize divs 隐藏。 jQuery UI 将小的divs 定位在resizable div 的角落，并将它们的样式设置为小且无边距。问题是这个css 规则：

#set div {
    background: none repeat scroll 0 0 black;
    color: white;
    float: left;
    height: 90px;
    margin: 0 10px 10px 0;
    padding: 0.5em;
    width: 90px;
}

这将覆盖.ui-resizable-[x] 的默认ui 样式，因为它们也是#set 块中的divs。基本上，您无意中调整了所有小角调整大小 divs 的大小，因为您的规则适用于 ID 为 set 的块中的所有 divs。

将您的规则更改为：

 #set div.resizable {
    background: none repeat scroll 0 0 black;
    color: white;
    float: left;
    height: 90px;
    margin: 0 10px 10px 0;
    padding: 0.5em;
    width: 90px;
}

这会将margin、width 和height 规则仅应用于您设置为可调整大小的块的较大div，而不应用于jQuery UI 正在创建的小型divs。