jquery ui 无法正确缩放文本!
我正在尝试使用 jquery ui 来缩放我正在拖动的 div,以便更容易地查看其后面的内容,但其中的任何文本都在奇怪地缩放。文本本身变得更小,但它周围似乎有一堆填充,并且现在正在浮动。文本延伸超过了 div 的底部,尽管它应该被 div 正确包含。我在文本行周围放置了红色边框,边框的大小与原始文本相同。我不太确定该怎么做才能让它工作...
HTML:
<div class="item draggable" id="item-1'">
<div class="image-block">
<a class="delete-button" title="delete me!" href="/remove/1" onclick="return $(this).confirm(\'Really remove this image?\');">X</a>
<a class="image" href="/edit/1"><img src="/someimage.jpg" /></a>
<div class="clear-block"></div>
</div>
<h3>Some title</h3>
</div>
CSS:
div.image-list div.item {
float:left;
background:#fff;
width:150px;
padding:5px;
margin:4px;
border:1px solid #d3d5d6;
}
div.image-list div.item h3 {
margin:0;
padding:0;
border:solid 1px #F00;
}
div.image-list div.item div.image-block a.delete-button {
float:right;
position:relative;
background:#fff;
display:none;
top:0.8em;
margin-bottom:-20.0em;
width:3em;
height:1.8em;
padding:0.2em 1em;
}
div.image-list div.item div.image-block a.image {
float:left;
display:block;
}
.clear-block {
clear:both;
}
jquery:
$(".draggable").draggable({
helper: 'clone',
start: function(ev, ui) {
$(ui.helper).effect( "scale", { percent: 50 }, 200 );
}
});
I'm trying use jquery ui to scale a div that I'm dragging around to make it easier to see what's behind it, but any text inside it is scaling strangely. The text itself becomes smaller, but it seems to have a bunch of padding around it and is floating now. The text extends past the bottom of the div even though it should be contained properly by the div. I put a red border around the lines of text and the borders are the same size as the original text. I'm not really sure what to do to get this to work...
HTML:
<div class="item draggable" id="item-1'">
<div class="image-block">
<a class="delete-button" title="delete me!" href="/remove/1" onclick="return $(this).confirm(\'Really remove this image?\');">X</a>
<a class="image" href="/edit/1"><img src="/someimage.jpg" /></a>
<div class="clear-block"></div>
</div>
<h3>Some title</h3>
</div>
CSS:
div.image-list div.item {
float:left;
background:#fff;
width:150px;
padding:5px;
margin:4px;
border:1px solid #d3d5d6;
}
div.image-list div.item h3 {
margin:0;
padding:0;
border:solid 1px #F00;
}
div.image-list div.item div.image-block a.delete-button {
float:right;
position:relative;
background:#fff;
display:none;
top:0.8em;
margin-bottom:-20.0em;
width:3em;
height:1.8em;
padding:0.2em 1em;
}
div.image-list div.item div.image-block a.image {
float:left;
display:block;
}
.clear-block {
clear:both;
}
jquery:
$(".draggable").draggable({
helper: 'clone',
start: function(ev, ui) {
$(ui.helper).effect( "scale", { percent: 50 }, 200 );
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
没关系,事实证明这是与我使用的另一个样式表的行高相冲突的。 >。>
Nevermind, it turns out it was a conflicting line-height from another stylesheet I was using. >.>