div中的流体跨度宽度答案

【问题标题】：Fluid span width in divdiv中的流体跨度宽度
【发布时间】：2014-01-22 19:26:15
【问题描述】：

您好，这个伟大的社区，

我有以下代码行来扩展跨度：

CSS

.spacer { 
   width:100%;
   position: relative;
   background-color: red;
}   
.spacer > span {
   display: inline-block;
   height: 20px;
   background-color: yellow;
}

脚本

$(function() {
        $(".spacer > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 2500);
        });
    });

HTML

<div class="spacer"><span style="width: 90%"></span></div>

跨度自动扩展到设置的宽度，例如90% 的间隔。如果我在那之后更改 Browserwindow 的宽度，则垫片会很好，但跨度会保持其宽度。如何将跨度扩大到 90%，然后使其流动到垫片宽度？

Here's a demo on jsFiddle.

【问题讨论】：

对我来说似乎很好，它可以工作

标签： jquery css html fluid-layout

【解决方案1】：

$(function() {
    $(".spacer > span").each(function() {
        var w = this.style.width; 
        // get the width property defined as inline style

        $(this)
        .data("origWidth", w)
        .width(0)
        .animate({
             width: $(this).data("origWidth")
        }, 2500);
    });
});

【讨论】：

这对我来说很完美！非常感谢您的快速答复！

【解决方案2】：

您的跨度计算是以像素为单位应用跨度宽度：- 您可以这样做：-

.data("origWidth", "90%")

DEMO

【讨论】：

感谢您的快速答复！