jquery ui 无法正确缩放文本!

发布于 2024-08-03 03:24:50 字数 1508 浏览 3 评论 0原文

我正在尝试使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

稚气少女 2024-08-10 03:24:51

没关系,事实证明这是与我使用的另一个样式表的行高相冲突的。 >。>

Nevermind, it turns out it was a conflicting line-height from another stylesheet I was using. >.>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文